Vue 3 – 淡入淡出过渡

Question

然而，我阅读了 Vue 2 的转换更改并阅读了 Vue 3 文档，但我仍然无法弄清楚如何使转换工作。 我对 Vue 很陌生。

旧页面应该淡出，新页面应该淡入，但我无法让它工作。

除了默认组件之外，我真的不知道在<transition>包装器中要写什么。 我尝试将组件更改为视图的名称，但这不起作用。

我的App.vue

<router-view :key="route.path" v-slot="{Component}" />
  <transition name="fade" mode="out-in">
    <component :is="Component" />
  </transition>
</router-view>

我的 CSS：

.fade-enter-active,
.fade-leave-active {
  transition: opacity 1s ease;
}

.fade-enter-from,
.fade-leave-active {
  opacity: 0;
}

我的文件夹结构：

Components: – Header.vue
  |         - Footer.vue
  |
Views:      - Home.vue
            - About.vue
            - Something.vue

感谢您提供有关如何使淡入淡出工作的任何提示！

Answer 1

尝试使用.fade-leave-to代替：

 Vue.createApp({ setup() { const test = Vue.ref(false); return { test } } }).mount('#app')

 .fade-enter-active, .fade-leave-active { transition: opacity 1s ease; }.fade-enter-from, .fade-leave-to { opacity: 0; }

 <script src="https://unpkg.com/vue@next"></script> <div id="app"> <transition name="fade" mode="out-in"> <div v-if="test">FADE</div> </transition> <button @click="test = !test">TOGGLE</button> </div>

使用您的代码段的示例：

<router-view v-slot="{ Component }">
    <transition name="fade" mode="out-in">
        <component :is="Component" />
    </transition>
</router-view>

.fade-enter-active,
.fade-leave-active {
    transition: opacity 1s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}