Vue 的动画

<transition>标签

• 使用条件

  • v-show与v-if
  • <router-view>跳转
  • <component :is="component">切换组件

• 属性

  • name: 改变class名称前的v-。
  • appear: 首次渲染Dom调用动画。
  • duration: 过渡持续时间。可以是一个对象，分别指定enter与levea。例如：{ enter: 500, leave: 1000 }。
  • mode: 过渡模式。 out-in/in-out两种模式。
  • css: 如果是纯使用js完成动画，可以传false。

<template>
  <transition name="fade">
    <!-- -->
  </transition>
</tempalte>

<!-- 会在 dom 特定动画周期 为 dom 绑定对应的 className -->
<style>
  .fade-enter,
  .fade-leave-to {}
  .fade-enter-to,
  .fade-leave {}
  .fade-enter-active,
  .fade-leave-active {
    /* 整个进入与离开动画中 都会绑定的 className */
    transition: all .2s linear;
    position: absolute;
  }
</style>

动画钩子函数

<template>
  <transition
    @before-enter="beforeEnter"
    @enter="enter"
    @after-enter="afterEnter"
    @enter-cancelled="enterCancelled"
    @before-leave="beforeLeave"
    @leave="leave"
    @after-leave="afterLeave"
    @leave-cancelled="leaveCancelled">
    <!-- ... -->
  </transition>
</tempalte>

<script>
export default {
  // ...
  methods: {
    beforeEnter(el) {
      // 动画调用之前
    },
    enter(el, done) {
      // done在enter或者leave中，调用done()就不会添加 v-enter-active或者v-leave-active 相当于没有了过渡属性。 
      // 最好别再enter与leave中传入done 否则不会自动完成过渡状态。如果是纯使用js完成动画，可以传入done，同时:css='false'搭配使用
    },
    afterEnter(el) {
      // 动画调用之后
    }
  }
}
</script>

利用自定义类型实现第三方库动画

<transition
  enter-class=".."
  enter-active-class="..."
  enter-to-class="..."
  leave-class="..."
  leave-active-class="..."
  leave-to-class="...">
  <!--  -->
</transition>

<transition-group>标签

• 属性

  • tag: transition-group渲染后的标签。
  • name: 与transition的name表现一致
  • appear: 与transition表现一致。

• 注意

  • 使用transition-group包裹的所有标签需要传入唯一值key。
  • css添加的类名会应用在标签内部元素，而不是容器本身。

.v-move {
  transition: all .2s linear;
}