Life is too short to waste a second

Vue transition使用

transition 作用于相同标签的内容切换

当标签不是使用if切换,而是直接改变其内容时,transition不会生效。下方为官方文档解释:

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

因此,在内容改变时想加上过渡效果,需要加上key才能触发。

transition-group

transition只能作用于单个标签,如需要多个标签同时过渡,需要使用transition-group,也需要绑定key。transition-group通常和v-for一起使用,如果只是几个标签过渡在外层加个div使用transition也是可以的。
transition-group默认会生成<span>标签包裹其下内容,可以使用tag属性更改为其他标签

发表评论

电子邮件地址不会被公开。