我对vue.js相对较新，并且一直试图在用户切换到新页面时让我的路由页面淡入淡出。我原以为用vue会很简单，但我一直在为此而烦恼。我找到的所有资源都表明，以下面的方式实现这一点是最简单的，就像我一样：
App.vue:
...
<template>
<head>
...
</head>
<header>
<nav>
<RouterLink to="/">Home</RouterLink>
<RouterLink to="/committees">Committees</RouterLink>
</nav>
</header>
<Transition name="fade" mode="out-in"><RouterView/></Transition>
</template>
<style>
.fade-enter-active,
.fade-leave-active {
transition: opacity .5s ease-in-out;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
...
</style>字符串
这适用于淡入新组件，但旧组件不会淡出。页面立即变为空白，然后新组件淡入。我试过所有的css和html版本，但都没有用。RouterView是否实际上从未淡出，因为组件只是切换，所以.fade-leave-to从未被触发？如果是这样的话，我如何才能实现我的最终目标淡出？如果不是，呃...漂亮的请帮帮忙！
1条答案
按热度按时间pvabu6sv1#
manual是你的朋友：
要在路径组件上使用过渡并设置导航动画，您需要使用v-slot API：
字符串