Vue API 4 (过渡和动画）

transition

• name 用于自动生成 CSS 过渡类名。例如：name: fade 将自动拓展为 .fade-enter ，.fade-enter-active等。默认类名为 "v"

• appear ，是否在初始渲染时使用过渡。默认为 false。

• css ，是否使用 CSS 过渡类。默认为 true。如果设置为 false，将只通过组件事件触发注册的 JavaScript 钩子。

• type，指定过渡事件类型，侦听过渡何时结束。有效值为 "transition" 和 "animation"。默认 Vue.js 将自动检测出持续时间长的为过渡事件类型。

• mode ，控制离开/进入的过渡时间序列。有效的模式有 "out-in" 和 "in-out"；默认同时生效。

• duration， 指定过渡的持续时间。

CSS 动画 animation

　　CSS 动画用法同 CSS 过渡，区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend事件触发时删除。

过渡的类名

1. v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。

2. v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

3. v-enter-to: 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。

4. v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

5. v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

6. v-leave-to: 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

同时使用过渡和动画(type)

　　同时使用过渡和动画时，需要使用 type 特性并设置 animation 或 transition 来明确声明你需要 Vue 监听的类型。

显性的过渡持续时间 (duration)

　　可以用 <transition> 组件上的 duration 属性定制一个显性的过渡持续时间 (以毫秒计)：

        <transition :duration="1000">...</transition>

　　也可以定制进入和移出的持续时间：

        <transition :duration="{ enter: 500, leave: 800 }">...</transition>

JavaScript钩子函数

　　可以在属性中声明 JavaScript 钩子

        <transition
          v-on:before-enter="beforeEnter"
          v-on:enter="enter"
          v-on:after-enter="afterEnter"
          v-on:enter-cancelled="enterCancelled"
​
          v-on:before-leave="beforeLeave"
          v-on:leave="leave"
          v-on:after-leave="afterLeave"
          v-on:leave-cancelled="leaveCancelled"
        >
​
        </transition>

        methods: {
          beforeEnter: function (el) {},
          // 当与 CSS 结合使用时
          // 回调函数 done 是可选的
          enter: function (el, done) {
            done()
          },
          afterEnter: function (el) {},
          beforeLeave: function (el) {
          },
          // 当与 CSS 结合使用时
          // 回调函数 done 是可选的
          leave: function (el, done) {
            done()
          },
        }

　　注意：当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。

　　注意：推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css="false"，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。

初始渲染的过渡(appear)

　　可以通过 appear 特性设置节点在初始渲染的过渡

多个元素的过渡(key)

　　对于原生标签可以使用 v-if / v-else 实现过渡，当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们。

　　也可以通过给同一个元素的 key 特性设置不同的状态来代替 v-if 和 v-else，

　　使用多个 v-if 的多个元素的过渡可以重写为绑定了动态属性的单个元素过渡。

        <transition>
          <button v-bind:key="docState">
            {{ buttonMessage }}
          </button>
        </transition>

        computed: {
          buttonMessage: function () {
            switch (this.docState) {
              case 'saved': return 'Edit'
              case 'edited': return 'Save'
              case 'editing': return 'Cancel'
            }
          }
        }

过渡模式（mode）

• in-out：新元素先进行过渡，完成之后当前元素过渡离开。

• out-in：当前元素先进行过渡，完成之后新元素过渡进入。

        <transition name="fade" mode="out-in">
          <!-- ... the buttons ... -->
        </transition>

多个组件的过渡

　　多个组件的过渡只需要动态组件就可以实现，不需要使用 key。

 

transition-group

• 不同于 <transition>，它会以一个真实元素呈现：默认为一个 <span>。你也可以通过 tag 特性更换为其他元素。

• 过渡模式不可用，因为我们不再相互切换特有的元素。

• 内部元素 总是需要 提供唯一的 key 属性值。

• CSS 过渡的类将会应用在内部的元素中，而不是这个组/容器本身。

• v-move 改变定位，对于设置过渡的切换时机和过渡曲线非常有用。

Vue 使用了一个叫 FLIP 简单的动画队列使用 transforms 将元素从之前的位置平滑过渡新的位置。FLIP 动画不仅可以实现单列过渡，多维网格也同样可以过渡

注意：使用 FLIP 过渡的元素不能设置为 display: inline 。作为替代方案，可以设置为 display: inline-block 或者放置于 flex 中。