vue动画

最常用的方法

结合Animate.css使用

• transition组件 让谁有动画，就用<transition>把谁包裹
• 配合第三方库来设置样式：animate.css
• 使用 style上添加
  enter-active-class="animated fadeIn"
  leave-active-class="animated fadeOut"

单个标签动画 transition 标签

  <transition 
      name="custom-classes-transition" 
      enter-active-class="animated fadeIn" //进入激活样式
      leave-active-class="animated fadeOut"//离开激活样式
  >
    <p v-if="show">hello</p>
  </transition>

多个标签动画transition-group标签

  <transition-group 
      name="custom-classes-transition" 
      enter-active-class="animated fadeIn" //进入激活样式
      leave-active-class="animated fadeOut"//离开激活样式
  >
    <p v-for='(a,index) in arr'  :key="index">{{a}}</p> //key用来区分不同的元素(v-for默认会复用原来的DOM元素)
  </transition-group>
  <script> 
    let vm=new  Vue({
      el:'#app',
      data:{
        arr:[1,2,3,4,5]
      }
    })
  </script> 

过渡状态管理不做多解释。