本文主要是介绍Vue - 关于Router路由跳转时显示的animate.css动画,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
Vue - 关于Router路由跳转时显示的animate.css动画
在Vue中,操作路由跳转时页面是闪白的,没有动画效果,我们可以通过在router-view中设置transition,并搭配animate丰富的动画效果来美化路由跳转时的显示效果.
1.安装animate
npm i -S animate.css
2.在main中引入animate.css
import 'animate.css'
3.在需要路由router-view跳转的页面中设置
如果用< transition >包裹< router-view >会出现leave-active-class动画失效
<template><router-view class="view" v-slot="{ Component }"><transitionmode="out-in"enter-active-class="animate__animated animate__fadeInRight"leave-active-class="animate__animated animate__fadeOutLeft"><component :is="Component" /></transition></router-view>
</template>
效果如下:
目前 Vue 的transition内置标签只能控制一种动画类型,要么是 CSS transition 过渡动画,要么是 CSS animation 关键帧动画。
CSS transition 过渡动画:
-
v-enter-from 淡入效果的起始状态。它先附加到元素上,然后元素被插入 DOM 树。插入 DOM 树后,下一帧该类被立即移除。
-
v-enter-active 淡入效果的过渡状态,整个过渡期间生效。该类用于设定动画时长、延时和缓动曲线(easing curve)等动画参数。
-
v-enter-to 淡入效果的最终状态。当 v-enter-from 类被移除的同时,添加 v-enter-to 类。当过渡动画结束后,移除 v-enter-to 类。
-
v-leave-from 淡出效果的起始状态。
-
v-leave-active 淡出效果的过渡状态。
-
v-leave-to 淡出效果的最终状态。
CSS animation 关键帧动画:
-
enter-from-class
-
enter-active-class
-
enter-to-class
-
leave-from-class
-
leave-active-class
-
leave-to-class
对于关键帧动画,只需设定 enter-active-class 和 leave-active-class 即可。
注意事项:
问题:
淡出和淡入同时发生
解决方法:
默认情况下,元素的淡出和淡入是同时发生的。设定属性 mode=“out-in”,可以协调不同元素的动画时序,先淡出后淡入。
参考链接:
animate动画:https://animate.style/
这篇关于Vue - 关于Router路由跳转时显示的animate.css动画的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!