vue中的动画

transition组件与Animate.css

版本: animate.css@4.1.1

// main.js
import 'animate.css'

单节点使用

<transition enter-active-class="animate__animated animate__fadeIn animate__faster"
            leave-active-class="animate__animated animate__fadeOut animate__faster"
            appear
            mode="out-in">
  <router-view />
</transition>

多节点使用

特别注意

需要移除的元素设置position:absolute来移出文档流，并且给move-class加上transition，否则动画效果无效

<transition-group
    move-class="move-transition"
    enter-active-class="animate__animated animate__fadeIn animate__fast"
    leave-active-class="animate__animated animate__fadeOut animate__faster move-document-stream"
    mode="out-in"
    tag="ul">
    <li v-for="item in items" v-bind:key="item">
      {{ item }}
    </li>
  </transition-group>
  <!-- move-class: 元素的改变位置的过程中应用该class -->
  .move-transition {
    transition: transform 1s;
  }
  <!-- 离开动画时必须将移除的item移出文档流，否则动画效果无法实现 -->
  .move-document-stream {
    position: absolute;
  }