学习
实践
活动
专区
工具
TVP
写文章

vue.js深入篇——二、过渡效果中篇

初始渲染的过渡

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

这里默认和进入/离开过渡一样,同样也可以自定义 CSS 类名。

自定义 JavaScript 钩子:

多个元素的过渡

我们之后讨论多个组件的过渡,对于原生标签可以使用 v-if/v-else 。最常见的多标签过渡是一个列表和描述这个列表为空消息的元素:

可以这样使用,但是有一点需要注意:

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

示例:

在一些场景中,也可以通过给同一个元素的 key 特性设置不同的状态来代替 v-if 和 v-else,上面的例子可以重写为:

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

可以重写为:

过渡模式

这里还有一个问题,下面的按钮:

在 “on” 按钮和 “off” 按钮的过渡中,两个按钮都被重绘了,一个离开过渡的时候另一个开始进入过渡。这是 的默认行为 - 进入和离开同时发生。

在元素绝对定位在彼此之上的时候运行正常:

然后,我们加上 translate 让它们运动像滑动过渡:

同时生效的进入和离开的过渡不能满足所有要求,所以 Vue 提供了 过渡模式

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

out-in: 当前元素先进行过渡,完成之后新元素过渡进入。

用 out-in 重写之前的开关按钮过渡:

只用添加一个简单的特性,就解决了之前的过渡问题而无需任何额外的代码。

in-out 模式不是经常用到,但对于一些稍微不同的过渡效果还是有用的。

将之前滑动淡出的例子结合:

多个组件的过渡

多个组件的过渡简单很多 - 我们不需要使用 key 特性。相反,我们只需要使用动态组件:

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180601A1TSZV00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

关注

腾讯云开发者公众号
10元无门槛代金券
洞察腾讯核心技术
剖析业界实践案例
腾讯云开发者公众号二维码

扫码关注腾讯云开发者

领取腾讯云代金券