10过渡动画

animation

yarn add animate.css

• .v-enter-from {}
  .v-enter-active {}
  .v-enter-to{}
  

  .v-leave-from{}
  .v-leave-active{}
  .v-leave-to{}
  

• 样式优化

  .v-enter-from ,
  .v-leave-from{}
  
  .v-enter-active,
  .v-leave-active{}
  
  .v-enter-to,
  .v-leave-to{}
  

• 命名

  <transition name="xxx"></transition>
  
  .xxx-enter/leave-from/active/to{}
  

• keyframe动画

  .xxx-enter/leave-from/active/to{
      animation: xxx .xs xxx;
  
  }
  @keyframes xxx{
      ...
  }
  

• 自定义动画类名

  • 自定义后的动画类名可以更好地与CSS动画库结合
  • 自定义动画类名 + 动画库 实现较好的动画和可维护性

  <transition
      enter-from-class="",
      enter-active-class="",
      enter-to-class="",
      leave-from-class="",
      leave-active-class="",
      leave-to-class=""
  ></transition>
  
  
  
  
      enter-from-class=""
      enter-active-class=""
      enter-to-class=""
      leave-from-class=""
      leave-active-class=""
      leave-to-class=""
  

• 设置初始自动渲染

  • transition中设置appear属性

• 使用js进行动画设置

  支持的事件种类
  <transition
      @before-enter="",
      @enter="",
      @afterEnter="",
      @before-leave="",
      @leave="",
      @after-leave=""
  >
  </transition>
  
  
  <script>
      const xxx = ()=>{}
  </script>
  

• 多元素切换

  默认同步执行
  mode='out-in'
  mode='in-out'
  

• 组动画

• • todo-move