首页
技术小册
AIGC
面试刷题
技术文章
MAGENTO
云计算
视频课程
源码下载
PDF书籍
「涨薪秘籍」
登录
注册
10.1 注册自定义指令
10.1.1 全局自定义指令
10.1.2 局部自定义指令
10.2 钩子函数
10.3 绑定值的类型
10.3.1 绑定数值
10.3.2 绑定字符串
10.3.3 绑定对象字面量
11.1 注册组件
11.1.1 注册全局组件
11.1.2 注册局部组件
11.2 向子组件传递数据
11.2.1 Prop基本用法
11.2.2 数据验证
11.3 监听子组件事件
11.3.1 监听自定义事件
11.3.2 监听原生事件
11.4 插槽的使用
11.4.1 基础用法
11.4.2 编译作用域
11.4.3 默认内容
11.4.4 命名插槽
11.4.5 作用域插槽
11.5 混入
11.5.1 基础用法
11.5.2 选项合并
11.6 动态组件
11.6.1 动态组件的用法
11.6.2 缓存效果
12.1 什么是组合API
12.2 setup()函数
12.3 响应式API
12.3.1 reactive()方法
12.3.2 watchEffect()方法
12.3.3 ref()方法
12.3.4 computed()方法
12.3.5 watch()方法
12.4 生命周期钩子函数
12.5 使用ref获取DOM元素
13.1 单元素过渡
13.1.1 CSS过渡
13.1.2 过渡的类名
13.1.3 自定义过渡的类名
13.1.4 CSS动画
13.1.5 使用JavaScript钩子函数实现动画
13.2 多元素过渡
13.2.1 多元素过渡的用法
13.2.2 设置元素的key属性
13.2.3 过渡模式的设置
13.3 多组件过渡
13.4 列表过渡
14.1 什么是虚拟DOM
14.2 render()函数的使用
14.2.1 基本用法
14.2.2 h()函数
14.3 使用JavaScript代替模板功能
15.1 路由基础
15.1.1 引入Vue Router
15.1.2 基本用法
15.1.3 动态路由匹配
15.1.4 命名路由
15.2 编程式导航
15.3 嵌套路由
15.4 命名视图
15.5 高级用法
15.5.1 beforeEach钩子函数
15.5.2 scrollBehavior方法
当前位置:
首页>>
技术小册>>
Vue.js从入门到精通(三)
小册名称：Vue.js从入门到精通(三)
### 13.4 列表过渡 在Vue.js中，过渡效果不仅限于单个元素的进入、离开或列表项的显示隐藏，它同样可以优雅地应用于列表的更新过程中，如添加、删除或排序列表项时。这种能力通过Vue的`<transition-group>`组件实现，它是对`<transition>`的扩展，专门用于处理一组元素的过渡。在本章中，我们将深入探讨Vue.js中的列表过渡，包括其基本用法、模式、以及高级技巧，帮助读者从入门到精通这一强大功能。 #### 13.4.1 理解`<transition-group>` `<transition-group>`与`<transition>`类似，但它有几个关键的不同点： - 它默认以`display: inline-block`渲染，但你可以通过CSS改变其行为。 - 它不会渲染一个真实的DOM元素，而是渲染一个真实的元素来包裹它的子节点。你可以通过`tag`属性指定这个包裹元素的类型，默认为`span`。 - 它支持通过`v-for`来渲染一个列表，并为列表中的每个节点应用过渡效果。 #### 13.4.2 基本用法 首先，我们来看一个简单的例子，展示如何使用`<transition-group>`为列表添加基本的进入和离开过渡。 ```html <template> <div id="app"> <button @click="addItem">添加项目</button> <button @click="removeItem">移除项目</button> <transition-group name="list" tag="div"> <div v-for="(item, index) in items" :key="item.id" class="list-item"> {{ item.text }} </div> </transition-group> </div> </template> <script> export default { data() { return { items: [ { id: 1, text: '项目 1' }, { id: 2, text: '项目 2' }, // 更多项目... ], nextId: 3 }; }, methods: { addItem() { this.items.push({ id: this.nextId++, text: `项目 ${this.nextId - 1}` }); }, removeItem() { if (this.items.length > 0) { this.items.pop(); } } } }; </script> <style> .list-enter-active, .list-leave-active { transition: opacity 1s; } .list-enter, .list-leave-to /* .list-leave-active 在 <2.1.8 版本中 */ { opacity: 0; } </style> ``` 在这个例子中，我们定义了一个列表，并提供了添加和删除列表项的功能。`<transition-group>`组件被用来包裹这些列表项，并通过CSS定义了进入和离开的过渡效果。注意，每个列表项都需要一个唯一的`key`属性，这是Vue跟踪每个节点的身份，从而重用和重新排序现有元素的关键。 #### 13.4.3 列表的排序过渡 当列表项的顺序发生变化时，`<transition-group>`也能提供平滑的过渡效果。这通常涉及到CSS动画，如位置或大小的渐变。 ```html <style> .list-move { transition: transform 1s; } </style> <!-- 在模板中，不需要额外设置 --> <transition-group name="list" tag="div"> <!-- 列表项 --> </transition-group> ``` 为了启用排序过渡，你需要给`<transition-group>`添加一个`.list-move`类（或你指定的名称），并在CSS中定义相应的`transition`属性。Vue会自动应用这个类到那些位置发生变化的元素上，从而触发过渡效果。 #### 13.4.4 列表的交错过渡 有时，你可能希望列表中的每个元素以不同的时间开始过渡，创建一种交错（或称为“涟漪”）效果。这可以通过动态绑定CSS类或使用JavaScript钩子函数来实现。 ```html <style> .staggered-enter-active, .staggered-leave-active { transition: opacity 1s; transition-delay: 0.5s * index; /* 假设index是列表项的索引 */ } </style> <!-- 但由于CSS无法直接访问索引，这里使用JavaScript --> <script> // 假设在methods中或computed属性中计算样式 // ... </script> <!-- 模板中，你可能需要为每个元素绑定一个特定的类或样式 --> <transition-group name="staggered" tag="div"> <!-- 使用v-bind:style或:class绑定动态样式/类 --> </transition-group> ``` 由于CSS无法直接访问`v-for`中的索引，实现交错过渡通常需要JavaScript的帮助，比如通过计算属性或方法为每个元素生成一个包含延迟时间的样式对象。 #### 13.4.5 列表过渡的高级技巧 - **使用第三方库**：对于复杂的动画效果，如页面翻转、滑动等，可以考虑使用如Animate.css、Velocity.js等第三方库来增强`<transition-group>`的动画效果。 - **性能优化**：在处理大量列表项时，过渡效果可能会影响性能。考虑使用`v-show`代替`v-if`来避免不必要的DOM销毁和重建，或者优化过渡效果的复杂度和持续时间。 - **过渡模式**：Vue 2.2.0+ 引入了`<transition-group>`的`mode`属性，允许你指定两个列表过渡的进入/离开行为。`'out-in'`和`'in-out'`是两种模式，分别表示先完成当前列表的离开过渡，再开始新列表的进入过渡，或两者同时进行但新列表优先。 #### 13.4.6 结论 `<transition-group>`是Vue.js中处理列表过渡的强大工具，它允许开发者以声明式的方式为列表的添加、删除、排序等操作添加平滑的动画效果。通过掌握其基本用法、理解列表排序和交错过渡的实现方式，以及探索高级技巧和性能优化方法，你可以在你的Vue.js应用中创造出更加动态和吸引人的用户界面。随着对Vue.js的深入理解，你将能够更加灵活地运用这些技术，提升用户体验，使你的应用脱颖而出。
上一篇：
13.3 多组件过渡
下一篇：
14.1 什么是虚拟DOM
该分类下的相关小册推荐：
vuejs组件实例与底层原理精讲
Vue.js从入门到精通(一)
TypeScript和Vue从入门到精通(二)
TypeScript和Vue从入门到精通(一)
TypeScript和Vue从入门到精通(四)
VUE组件基础与实战
vue项目构建基础入门与实战
Vue面试指南
Vue源码完全解析
TypeScript和Vue从入门到精通(三)
Vue.js从入门到精通(四)
Vue3技术解密
