如何解决Vue 3 - 淡入淡出过渡中断
然而,我阅读了 Vue 2 中的转换更改并阅读了 Vue 3 文档,但我仍然无法弄清楚如何使转换工作。 我对 Vue 很陌生。
旧页面应该淡出,新页面应该淡入,但我无法让它工作。
除了默认的组件之外,我真的不知道在 <transition>
包装器中写什么。我尝试将 component 更改为视图的名称,但这不起作用。
我的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
感谢您提供有关如何使褪色起作用的任何提示!
解决方法
尝试改用 .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;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。