开发者学堂课程【Vue.js 入门与实战:动画-transition-group 中 appear 和 tag 属性的作用】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/586/detail/8172
动画-transition-group 中 appear 和 tag 属性的作用
目录:
一、 transition-group 属性 appear 属性
二、 tag 属性
页面刚进来时,会直接显示,此时如果想要实现,点开页面是,所有的展示内容渐渐上来,需要增加,appear 这个属性。
一、transition-group 属性 appear 属性
<transition-group appear>
<li v-for=" (item, i) in list" :key="item id" click="del (i) ">
((item.id)) --- ((item. name))
</li>
</tranaition-group>
</ul>
给ransition-group添加 appear 属性,实现页面刚展示出来的时候,入场时候的效果
二、tag 属性
通过对代码分析,会发现系统默认把 transition-group 渲染了一个 span 元素,这一操作不合规,涉及到了 W3C 规范,此时需要取消掉 span 元素。
<transition-group appear tag=“ul”>
<li v-for=" (item, i) in list" :key="item id" click="del (i) ">
((item.id)) --- ((item. name))
</li>
</tranaition-group>
通过为 transition-group 元素,设置 tag 属性,指定 transition-group 渲染为指定的元素,如果不指定 tag 属性,默认,渲染为 span 标签。