动画-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 标签。

相关文章
|
6月前
|
前端开发
页面无法滑动-CSS: touch-action属性
页面无法滑动-CSS: touch-action属性
34 0
16avalon - 指令ms-attr(属性绑定)
16avalon - 指令ms-attr(属性绑定)
65 1
|
前端开发 JavaScript
34avalon - 指令ms-effect(动画绑定)
34avalon - 指令ms-effect(动画绑定)
41 0
|
21天前
|
前端开发
transition-property 属性和transition-duration属性
【10月更文挑战第5天】transition-property 属性和transition-duration属性。
14 2
|
2月前
<select>标记和<option>标签的常用属性
<select>标记和<option>标签的常用属性
24 2
|
3月前
Flutter更改主题颜色报错:type ‘Color‘ is not a subtype of type ‘MaterialColor‘
Flutter更改主题颜色报错:type ‘Color‘ is not a subtype of type ‘MaterialColor‘
36 4
|
4月前
Element UI【实战范例】下拉选择 el-select 的 change 事件传入选中值+自定义参数
Element UI【实战范例】下拉选择 el-select 的 change 事件传入选中值+自定义参数
653 1
|
6月前
|
前端开发
z-index失效的几种情况,父标签position属性为relative的时候,详解
z-index失效的几种情况,父标签position属性为relative的时候,详解
|
前端开发
react是否支持给标签设置自定义的属性,比如给video标签设置webkit-playsinline?
react是否支持给标签设置自定义的属性,比如给video标签设置webkit-playsinline?
162 0
|
搜索推荐 前端开发 JavaScript
meta标签有哪些属性和属性值?li设为行内块时有间隙怎么办?call、apply和bind的作用和区别?
`meta`标签可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。`meta`标签位于文档的头部,不包含任何内容。`meta`标签的属性定义了与文档相关联的名称/值对。