vue的transition动画
-
关于vue中animation动画问题
- 找到要用动画的元素。我是想要实现切换页面的动画效果,所以找到app.vue中的router-view,用transition将它包裹起来。
- 用动画库animate.css,需要npm install animate.css --save
- 在main.js中引入动画
import animated from 'animate.css'//引入动画 Vue.use(animated)
- 4.开始写transition动画了
<template> <div id="app"> <Navbar></Navbar> <!-- 设置进入、离开动画 --> <transition enter-active-class="animated zoomIn faster" leave-active-class="animated zoomOut faster" class="tran" mode="out-in" > <router-view class="show_animate"/> </transition> </div> </template>
注意:需要给transition加一个class类,设置position: relative,然后给将要进行动画的元素设置position: absolute,否则动画位置会很乱。还需要设置给transition设置mode=“out-in”,是上个动画结束再执行下一个,不然看起来会很怪。
-
transition-group也同理