vue动画

 1.vue过渡动画

理解：  

Enter: 显示
     v-enter: 显示之前                   opacity:0    隐藏      
     v-enter-active:  显示时候      
     v-enter-to:  显示后                 opacity:1    显示
 
  Leave: 隐藏
       v-leave: 隐藏之前                   opacity:1    显示
v-leave-active：隐藏的时候     
       v-leave-to: 隐藏之后                opacity:0    隐藏

2. 如何使用vue过渡动画

<div id="demo">
  <button @click="show = !show">Toggle</button>
  <transition name="xxx">
    <p v-show="show">hello</p>
  </transition>
</div>

<script type="text/javascript">
  new Vue({
    el: '#demo',
    data: {
      show: true
    }
  })

</script>

    /*指定过渡样式*/
    .xxx-enter-active, .xxx-leave-active {
      transition: opacity 1s
    }
    /*指定隐藏时的样式*/
    .xxx-enter, .xxx-leave-to {
      opacity: 0;
    }

总结：1. 给需要添加动画的标签添加<transition name="xxx"> 并且指定name

2.指定隐藏时的样式

3.指定过渡样式     vue会自动给动画标签添加classs  -enter-activite    -leave-active 对应样式