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