动画库和过渡我们都简单介绍了如何单独使用!那么一起使用其实就是两者结合
<div id="app">
<transition
type="transition"
appear
enter-active-class="animated swing active"
leave-active-class="animated bounceOutDown leave"
appear-class="animated swing"
:duration="{enter:3000,leave:5000}"
>
<p v-if="show">Hello World</p>
</transition>
<button @click="toggle">切换</button>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
show:true
},
methods:{
toggle:function(){
this.show=!this.show;
}
}
})
</script>
添加过渡样式
.v-enter,.v-leave-to{
opacity: 0;
color: #000;
}
.active,.leave{
color:deepskyblue;
transition: all 3s;
}
给定不同状态是的css,实现过渡
解决第一次出现没有动画新增apper属性点添加apper-active-class,同时使用过渡和动画,可以在class中新增过渡的calss,v-enter-active,v-leave-active,动画时间以哪个为准可以设置tyep=animation或者transition,也可以自定义动画时长,:duration传入数字(ms)或者传入对象enter和leave分别时长,