@yangfch3
2017-12-09T13:32:56.000000Z
字数 1706
阅读 1869
Vue
插入、更新或者移除 DOM 的几种过渡实现方式(可以同时配合使用):
name
,准备与 name
对应的相关 Class 样式在下列情形中,可以给任何元素和组件添加 entering/leaving 过渡
当插入或删除包含在 transition
组件中的元素时,Vue 将会做以下处理:
<transition>
组件相关属性
name
:name
name
也是可以动态绑定的
enter-class
- leave-to-class
:duration="{enter:xxx, leave:yyy}"
@before-enter
- @leave-cancelled
appear
appear-class
- appear-active-class
只使用 4 中第四种方案(JavaScript 调度过渡)时,事件的回调会被自动传入 el
(过渡元素),在 enter
和 leave
的回调中,还会传入一个 done
的回调,在事件回调内调用 done
是必须的。
methods: {
enter: function (el, done) {
// ...
done()
},
}
仅使用 JavaScript 过渡的元素添加 v-bind:css="false"
,Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响
多个元素:v-if/v-else
多个组件:使用动态组件(component, is)
给在 <transition>
组件中的多个元素设置 key
多个元素的过渡模式:<transition>
的默认行为 - 进入和离开同时发生
<transition-group>
组件相关属性:
tag
move-class
Vue 使用了一个叫 FLIP 简单的动画队列:使用 transforms 将元素从之前的位置平滑过渡新的位置(解释见下文)
使用 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
指定类名①-⑤ 是非常快的
<transition>
或者 <transition-group>
作为根组件,然后将任何子组件放置在其中这部分没有新的 API 或指令,这是因为 Vue 本身有一套响应式系统,数据与 DOM 的特性等进行绑定,通过对数据的过渡可以很方便地实现 DOM 的状态过渡。
很多特定的 DOM 上动画可以提取到专用的子组件。链接
将一些具有特定过渡特效的抽取为组件,过渡的实现也在组件内,复杂度从父组件移到了单一的子组件内