App.vue 默认这样使用路由
<router-view />
使用过度动画需要改成这样
<router-view v-slot="{ Component }"> <transition enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeOut"> <component :is="Component" /> </transition> </router-view>
这里是使用了 Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡
- 条件渲染 (使用
v-if) - 条件展示 (使用
v-show) - 动态组件
- 组件根节点
重点，做Router切换动画，需要用 div 包裹 router-view
div 设置为 position: relative; router-view 设置为 position: absolute;
<div style="position: relative; height: 100%; width: 100%; perspective: 1200px;"> <router-view v-slot="{ Component }" style="position: absolute; height: 100%; width: 100%;"> <transition enter-active-class="animate__animated animate__bounceInRight animate__delay-1s" leave-active-class="animate__animated animate__bounceOutLeft"> <component :is="Component" /> </transition> </router-view> </div>
这样路由页面切换时，div 标签内会同时有，当前页面和 要 切换的页面，具体F12自己体会
enter-active-class：新页面进入样式
leave-active-class：旧页面退出样式
这里使用了animate.css动画库， 默认进入和退出是同时执行的，我们在进入样式内添加 animate__delay-1s 延迟1秒执行