最常用的方法
结合Animate.css使用
- transition组件 让谁有动画，就用<transition>把谁包裹
- 配合第三方库来设置样式：animate.css
- 使用 style上添加
enter-active-class="animated fadeIn"
leave-active-class="animated fadeOut"
单个标签动画 transition 标签
<transition
name="custom-classes-transition"
enter-active-class="animated fadeIn" //进入激活样式
leave-active-class="animated fadeOut"//离开激活样式
>
<p v-if="show">hello</p>
</transition>
多个标签动画transition-group标签
<transition-group
name="custom-classes-transition"
enter-active-class="animated fadeIn" //进入激活样式
leave-active-class="animated fadeOut"//离开激活样式
>
<p v-for='(a,index) in arr' :key="index">{{a}}</p> //key用来区分不同的元素(v-for默认会复用原来的DOM元素)
</transition-group>
<script>
let vm=new Vue({
el:'#app',
data:{
arr:[1,2,3,4,5]
}
})
</script>
