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)
<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也同理
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
