vue项⽬中路由切换使⽤animate.css动画库
vue-cli初始项⽬，这个不⽤再详说了吧
<link href="cdn.bootcss/animate.css/3.5.2/animate.min.css" rel="stylesheet">
我直接在 index.html 中引⼊ animate.css 库
在 App.vue 中 transition 标签定义好进⼊、离开的变量 class ， 在 router-view 定义好 class animated ， animate.css的⽤法必须定义calss：animated
<template>
<div id="app">
<home :isTop="isTop"></home>
<div class="routerView">
<transition :enter-active-class="enterClass" :leave-active-class="leaveClass">
<router-view class="animated"></router-view>
</transition>
</div>
</div>
</template>
ClassArr 就是保存的 animate.css 的 css动画样式，我这随机选的⼗⼏个css样式名
data() {
return {
isTop: false,
transitionName: 'slide-right',
enterClass: '',
leaveClass: '',
ClassArr: ['rubberBand','pulse','swing','tada','wobble','heartBeat','fadeOut','flipInX','flipInY','flipOutX','flipOutY','rotateIn','rotateOut','rotateOutDownLeft',' rotateOutDownRight','rotateOutUpLeft','rotateOutUpRight','hinge','jackInTheBox','rollIn','rollOut']
}
监听路由变化
watch: {
$route(to, from) {
this.leaveClass = this.ClassArr[this.random()];
setTimeout(()=>{
},500)
}
},
methods⽅法中定义随机数
random() {
//定义随机数，对应好 this.ClassArr.length 的长度，我这⾥ length 是 21    return Math.floor(Math.random() * (1 - 21) + 21)
transition用法搭配}
接下来，运⾏去看下路由切换带来的动画效果吧

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。