动画-transition-group 中 appear 和 tag 属性的作用|学习笔记

简介: 快速学习动画- transition-group 中 appear 和 tag 属性的作用

开发者学堂课程【Vue.js 入门与实战动画-transition-group 中 appear 和 tag 属性的作用】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/586/detail/8172


动画-transition-group 中 appear 和 tag 属性的作用


目录:

一、 transition-group 属性 appear 属性

二、 tag 属性

 

image.png

 

页面刚进来时,会直接显示,此时如果想要实现,点开页面是,所有的展示内容渐渐上来,需要增加,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 标签。

相关文章
|
9月前
16avalon - 指令ms-attr(属性绑定)
16avalon - 指令ms-attr(属性绑定)
42 1
|
2月前
|
前端开发
z-index失效的几种情况,父标签position属性为relative的时候,详解
z-index失效的几种情况,父标签position属性为relative的时候,详解
|
8月前
|
移动开发 前端开发 JavaScript
uniapp改变radio大小-属性transform: scale()
uniapp改变radio大小-属性transform: scale()
102 0
|
11月前
|
前端开发
react是否支持给标签设置自定义的属性,比如给video标签设置webkit-playsinline?
react是否支持给标签设置自定义的属性,比如给video标签设置webkit-playsinline?
127 0
|
12月前
|
搜索推荐 前端开发 JavaScript
meta标签有哪些属性和属性值?li设为行内块时有间隙怎么办?call、apply和bind的作用和区别?
`meta`标签可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。`meta`标签位于文档的头部,不包含任何内容。`meta`标签的属性定义了与文档相关联的名称/值对。
|
12月前
|
小程序
小程序:picker-view选择器快速滚动,确认时,”值显示错误“
小程序:picker-view选择器快速滚动,确认时,”值显示错误“
134 0
|
前端开发
前端 video 元素总是浮在最上方,增加一个 z-index 属性
前端 video 元素总是浮在最上方,增加一个 z-index 属性
|
JavaScript 开发者
动画-使用 transition-group 元素实现列表动画|学习笔记
快速学习动画-使用 transition-group 元素实现列表动画
118 0
动画-使用 transition-group 元素实现列表动画|学习笔记
|
JavaScript 开发者
动画-使用transition-group元素实现列表动画|学习笔记
快速学习动画-使用transition-group元素实现列表动画
109 0
动画-使用transition-group元素实现列表动画|学习笔记