javascript - Vue 3 – 淡入淡出过渡

Question

然而，我阅读了 Vue 2 的转换更改并阅读了 Vue 3 文档，但我仍然无法弄清楚如何使转换工作。 我对 Vue 很陌生。
旧页面应该淡出，新页面应该淡入，但我无法让它工作。
我真的不知道在 <transition> 里面写什么包装器而不是默认组件。我尝试将组件更改为 View 的名称，但这不起作用。
我的 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;
}