把要渲染的标签放在transition里;
当被transition包裹是,Vue会为标签增加两个样式 fafe-enter fade-enter-active 当开始时.fade-enter会去除结束时.fade-leave-to .fade-leave-active
<transition name="fade"> <div v-if="show" >hello world</div> </transition>
<button @click="change">change</button>
var app = new Vue({
el:'#app',
data:{
show:true
},
methods:{
change:function(){
this.show=!this.show
}
}
})
在style中自己写的:
.fade-enter{ opacity: 0; } .fade-enter-active{ transition: opacity 3s; } .fade-leave-to{ opacity: 0; } .fade-leave-active{ transition: opacity 3s; }
另一种方法:
为类名取名字:
<transition name="fade" fade-enter-active="active" fade-leave-active="leave"> <div v-if="show" >hello world</div> </transition>
style就简写了为其等于的名字
使用animate.css
1.首先引入animate.css,参照官网对其进行选样式
2.用法:
<transition name="fade" enter-active-class="animated swing" leave-active-class="animated shake"> <div v-if="show" >hello world</div> </transition>