vue 实现动画效果是在某一时刻往标签上添加一些样式来实现的
首先我们先写一个没有动画效果:
<div v-if="cssanimate">hello css animate</div>
<button @click='cssclick'>css动画</button>
给按钮添加toggle的效果:
data(){
return{
cssanimate:true
}
}
methods:{
cssclick:function(){
this.cssanimate = !this.cssanimate
},
}
我们给元素添加动画效果,首先要在添加效果的元素上添加<transition>
name 为fade 是自定义名字
.fade-enter,.fade-leave-to,.fade-enter-active,.fade-leave-active ,在某一时刻的类上定义我们要实现的动画效果。
fade-enter-active在显示的过程中一直存在的类
fade-leave-active 在隐藏的过程中一直存在的类
请注意,fade- 是因为这个transition 的name为fade,如果transition没有名字,那么默认的是v-enter,v-leave-to,v-enter-active。v-leave-active
<style>
.fade-enter,.fade-leave-to{
opacity:0;
}
.fade-enter-active,.fade-leave-active{
transition:opacity 3s;
}
<style>
就可以实现淡入淡出的效果了。过渡动画效果。
用v-if和v-show控制隐藏都会带动画效果的。