[关闭]
@yangfch3 2017-12-09T05:32:56.000000Z 字数 1706 阅读 1701

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(过渡元素),在 enterleave 的回调中,还会传入一个 done 的回调,在事件回调内调用 done 是必须的。

    1. methods: {
    2. enter: function (el, done) {
    3. // ...
    4. done()
    5. },
    6. }
  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 中添加的 transformduration
⑥ 由于 5,元素需要从旧位置回到新位置(去掉了 transform),使用 4 中 v-mode 类名指定的 transition
⑦ 监听过渡结束事件,去掉 v-mode 指定类名

①-⑤ 是非常快的

可复用的过渡

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

状态过渡

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

把过渡放到组件里

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

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

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注