Vue 3 – 淡入淡出过渡被破坏

Question

然而，我阅读了 Vue 2 的转换更改并阅读了 Vue 3 文档，但我仍然不知道如何进行转换。我对 Vue 很陌生。

\n

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

\n

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

\n

我的App.vue

\n

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

\n

我的CSS：

\n

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

\n

我的文件夹结构：

\n

Components: \xe2\x80\x93 Header.vue\n  |         - Footer.vue\n  |\nViews:      - Home.vue\n            - About.vue\n            - Something.vue\n

\n

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

\n

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;
}