Vue_CSS动画原理

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控制隐藏都会带动画效果的。