【Vue.js 入门与实战】--动画-transition-group中appear和tag属性的作用

简介: 一、 transition-group属性 appear属性二、 tag属性

动画-transition-groupappeartag属性的作用

目录:

一、     transition-group属性 appear属性

二、     tag属性

 

image.png

 

页面刚进来时,会直接显示,此时如果想要实现,点开页面是,所有的展示内容渐渐上来,需要增加,appear 这个属性。

 

一、transition-group属性 appear 属性

  <ul>

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

 

相关文章
|
29天前
|
JavaScript
vue实例的data属性,可以在哪些生命周期中获取到
Vue实例的`data`属性在`beforeCreate`、`created`和`beforeMount`阶段已可访问。此时,虽能使用数据,但事件监听和DOM操作不可行。`beforeCreate`时数据可访问,但未初始化观测和事件;`created`时数据完全可用,但未挂载到DOM;`beforeMount`时仍可访问数据,DOM挂载未开始。
31 3
|
1天前
|
JavaScript
【vue实战】父子组件互相传值
【vue实战】父子组件互相传值
6 1
|
2天前
|
JavaScript 前端开发 容器
< 每日小技巧: 基于Vue状态的过渡动画 - Transition 和 TransitionGroup>
Vue 的 `Transition` 和 `TransitionGroup` 是用于状态变化过渡和动画的组件。`Transition` 适用于单一元素或组件的进入和离开动画,而 `TransitionGroup` 用于 v-for 列表元素的增删改动画,支持 CSS 过渡和 JS 钩子。
< 每日小技巧: 基于Vue状态的过渡动画 - Transition 和 TransitionGroup>
|
4天前
|
JavaScript
Vue控制是否禁用disabled属性
Vue控制是否禁用disabled属性
10 1
|
4天前
|
JavaScript 前端开发 UED
动画效果:给 Vue 应用添加过渡和动画
【4月更文挑战第22天】Vue 框架提供强大的过渡和动画功能,增强用户体验,创建流畅的用户界面。通过CSS动画、设置过渡属性和自定义过渡,开发者能实现多样化效果。同时,结合组件状态、关注性能并测试优化,确保在不同设备上运行良好,打造引人入胜的应用交互。
|
10天前
|
缓存 JavaScript 前端开发
vue项目实战:实战技巧总结(中)
vue项目实战:实战技巧总结
57 1
|
18天前
|
缓存 JavaScript API
「Vue3系列」Vue3 计算属性(computed)、监听属性(watch)
在 Vue 3 中,计算属性(Computed Properties)是一种强大的功能,它允许你声明一个依赖于其他响应式数据属性的属性,并且这个属性的值会根据其依赖的数据的变化而自动更新。计算属性是基于它们的依赖关系进行缓存的,只有在它的相关依赖发生改变时才会重新求值。
28 0
|
19天前
|
缓存 JavaScript
vue中的计算属性和侦听属性的区别
vue中的计算属性和侦听属性的区别
N..
|
1月前
|
缓存 JavaScript 前端开发
Vue.js的计算属性
Vue.js的计算属性
N..
11 2
N..
|
1月前
|
JavaScript 前端开发 数据处理
Vue.js的过滤器和监听属性
Vue.js的过滤器和监听属性
N..
19 1