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

相关文章
|
2月前
|
前端开发
transition-property 属性和transition-duration属性
【10月更文挑战第5天】transition-property 属性和transition-duration属性。
45 2
|
3月前
<select>标记和<option>标签的常用属性
<select>标记和<option>标签的常用属性
127 2
|
4月前
Flutter更改主题颜色报错:type ‘Color‘ is not a subtype of type ‘MaterialColor‘
Flutter更改主题颜色报错:type ‘Color‘ is not a subtype of type ‘MaterialColor‘
55 4
|
5月前
Element UI【实战范例】下拉选择 el-select 的 change 事件传入选中值+自定义参数
Element UI【实战范例】下拉选择 el-select 的 change 事件传入选中值+自定义参数
883 1
|
7月前
|
JavaScript 前端开发 容器
Vue 3 中 <transition-group> 组件报错的非 props 属性传递问题
Vue 3 中 <transition-group> 组件报错的非 props 属性传递问题
147 1
|
7月前
|
前端开发
z-index失效的几种情况,父标签position属性为relative的时候,详解
z-index失效的几种情况,父标签position属性为relative的时候,详解
|
搜索推荐 前端开发 JavaScript
meta标签有哪些属性和属性值?li设为行内块时有间隙怎么办?call、apply和bind的作用和区别?
`meta`标签可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。`meta`标签位于文档的头部,不包含任何内容。`meta`标签的属性定义了与文档相关联的名称/值对。
|
小程序
小程序:picker-view选择器快速滚动,确认时,”值显示错误“
小程序:picker-view选择器快速滚动,确认时,”值显示错误“
357 0
ViewPager2实现内部Item的动态滚动
最近接到了一个需求,大概类似如下图所示的一个样式(省略了部分细节,不影响大概)。
352 0
|
JavaScript 开发者
动画-使用 transition-group 元素实现列表动画|学习笔记
快速学习动画-使用 transition-group 元素实现列表动画
153 0
动画-使用 transition-group 元素实现列表动画|学习笔记