Vue 过渡系统

Vue

进入、离开与列表过度

单元素/组件的过渡

1. 插入、更新或者移除 DOM 的几种过渡实现方式（可以同时配合使用）：

   1. 指定过渡 name，准备与 name 对应的相关 Class 样式
   2. 自定义过渡阶段 Class 类名（方便与其他 CSS 动画库协作）
   3. 在过渡钩子函数中使用 JavaScript 直接操作 DOM（方便与其他 JavaScript 动画库协作）

2. 在下列情形中，可以给任何元素和组件添加 entering/leaving 过渡

   • 条件渲染 (使用 v-if/else)
   • 条件展示 (使用 v-show)
   • 动态组件
   • 组件根节点

3. 当插入或删除包含在 transition 组件中的元素时，Vue 将会做以下处理：

   1. 在恰当的时机（过渡或动画事件结束，或者达到指定的过渡事件）添加/删除 CSS 类名。
   2. 如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用。
   3. 如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作 (插入/删除) 在下一帧（requestFrame）中立即执行。

4. <transition> 组件相关属性
   

   1. name :name
      

      name 也是可以动态绑定的

   2. enter-class - leave-to-class
   3. :duration="{enter:xxx, leave:yyy}"
   4. @before-enter - @leave-cancelled
   5. appear
   6. appear-class - appear-active-class
      5 和 6 用于指定 初始渲染的过渡

5. 只使用 4 中第四种方案（JavaScript 调度过渡）时，事件的回调会被自动传入 el（过渡元素），在 enter 和 leave 的回调中，还会传入一个 done 的回调，在事件回调内调用 done 是必须的。

   methods: {
       enter: function (el, done) {
           // ...
           done()
       },
   }

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

多个元素/组件的过渡

1. 多个元素：v-if/v-else

2. 多个组件：使用动态组件（component, is）

3. 给在 <transition> 组件中的多个元素设置 key

4. 多个元素的过渡模式：<transition> 的默认行为 - 进入和离开同时发生

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

列表过渡

1. <transition-group> 组件相关属性：

   1. tag
   2. move-class

2. Vue 使用了一个叫 FLIP 简单的动画队列：使用 transforms 将元素从之前的位置平滑过渡新的位置（解释见下文）

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

v-move（FLIP） 原理：视频演示

① DOM 立即变动（已到新位置 newPos）
② 计算新位置（newPos）与旧位置（oldPos）偏差
③ 利用 2 中计算的偏差，添加 style.transform，立即（duration = 0s） transform 回旧位置
④ 添加 v-move 对应类名（类名样式指定 transition 属性）
⑤ 去掉 3 中添加的 transform 和 duration
⑥ 由于 5，元素需要从旧位置回到新位置（去掉了 transform），使用 4 中 v-mode 类名指定的 transition
⑦ 监听过渡结束事件，去掉 v-mode 指定类名

①-⑤ 是非常快的

可复用的过渡

1. 要创建一个可复用过渡组件，你需要做的就是将 <transition> 或者 <transition-group> 作为根组件，然后将任何子组件放置在其中

状态过渡

• 数字和运算
• 颜色的显示
• SVG 节点的位置
• 元素的大小和其他的属性

这部分没有新的 API 或指令，这是因为 Vue 本身有一套响应式系统，数据与 DOM 的特性等进行绑定，通过对数据的过渡可以很方便地实现 DOM 的状态过渡。

把过渡放到组件里

1. 很多特定的 DOM 上动画可以提取到专用的子组件。链接

2. 将一些具有特定过渡特效的抽取为组件，过渡的实现也在组件内，复杂度从父组件移到了单一的子组件内