vue2借助animate.css实现路由动画效果

第一步:

npm install animate.css --save

第二步:打开main.js

import animate from 'animate.css'
Vue.use(animate)
第三步:
<transition
:duration="1000"
mode="out-in"
appear
enter-active-class="animated fadeIn"
leave-active-class="animated fadeOut"
appear-active-class="animated zoomInDown">
<router-view />
</transition>

 完成这三步之后,点击页面的每一个路由都会有动画效果了

1. vue2路由动画效果实现

2. 在vue中使用animate.css

3. Animate.css官网

4. animate.css的使用--小火柴

5. vue使用animate.css进行路由跳转

 

posted @ 2018-08-22 11:10  叶子玉  阅读(687)  评论(0)    收藏  举报