Vue 笔记(7)- 过渡 & 动画 2(初始渲染 / 多组件过渡)

原创 乘风逐月 随笔 Vue 410阅读 2018-05-07 15:17:54 举报

1.初始渲染的过渡

可以通过 appear 特性设置节点在初始渲染的过渡。和进入/离开过渡一样,同样也可以自定义css类名,自定义钩子函数。

2.多个元素的过渡

对于原生标签可以使用 v-if / v-else:

注:当有相同标签名的元素切换时,需要通过 key 特性设置唯一的值来标记让 Vue 区分它们,否则 Vue 为了效率只会替换相同标签内部的内容。 给在 transition 组件中的多个元素设置 key 是一个更好的实践。

3.过渡模式

transition 的默认行为是:进入和离开同时发生。可以设置默认行为:
a. in-out:新元素先进行过渡,完成之后当前元素过渡离开。
b. out-in:当前元素先进行过渡,完成之后新元素过渡进入。

4.多个组件的过渡

多个组件的过渡,不需要使用 key 特性,只需要使用动态组件即可:

5.列表过渡

使用 v-for 渲染列表时,过渡使用 transition-group 组件。这个组件的特点:
a. 不同于 transition ,它会以一个真实元素呈现:默认为一个 span。你也可以通过 tag 特性更换为其他元素。
b. 内部元素总是需要提供唯一的 key 属性值。

6.列表的进入/离开过渡

例如:

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复