首页
技术小册
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.2 多元素过渡 在Vue.js中，过渡和动画是提升用户体验的重要手段之一。Vue通过内置的`<transition>`和`<transition-group>`组件，使得在元素进入、离开以及列表变更时添加过渡效果变得简单而直观。在前面的章节中，我们可能已经学习了如何使用`<transition>`为单个元素添加过渡效果。然而，在实际应用中，我们经常需要同时对多个元素应用过渡效果，这时`<transition-group>`组件就派上了用场。本章节将深入讲解如何在Vue.js中利用`<transition-group>`实现多元素过渡。 #### 13.2.1 理解`<transition-group>` `<transition-group>`是Vue为处理列表元素（如使用`v-for`渲染的元素列表）的进入、离开和列表排序等动画而提供的组件。与`<transition>`不同，`<transition-group>`不仅可以处理元素的进入和离开，还能处理元素在列表中的位置变化。它默认将元素渲染为一个真实的DOM节点（默认为`<span>`），但你可以通过`tag`属性改变这个默认行为，比如设置为`<div>`或`<ul>`等。 #### 13.2.2 基本用法 首先，让我们看一个简单的`<transition-group>`示例，演示如何为列表中的多个元素添加基本的过渡效果。 ```html <template> <div id="app"> <button @click="add">Add Item</button> <button @click="remove">Remove Item</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: 'Item 1' }, { id: 2, text: 'Item 2' }, // 更多项目... ], nextId: 3 }; }, methods: { add() { this.items.push({ id: this.nextId++, text: `Item ${this.nextId}` }); }, remove() { if (this.items.length) { 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`来为每个列表项提供一个唯一标识，这是在使用`v-for`与`<transition-group>`时非常重要的，因为它帮助Vue跟踪每个节点的身份，从而应用正确的过渡。 #### 13.2.3 列表排序过渡 `<transition-group>`不仅限于简单的进入和离开过渡，它还能处理列表项目的重新排序。当列表的顺序发生变化时（例如，通过拖放操作或数据更新），`<transition-group>`可以平滑地过渡这些变化。 要实现排序过渡，你通常需要定义一个`v-move`的CSS类，该类描述了元素在移动过程中的样式。但请注意，Vue 2.x 中`v-move`不是一个真正的CSS类，而是一个特殊的钩子，Vue会在这个钩子触发时应用你提供的CSS变换或动画。然而，由于浏览器的限制，Vue实际上是通过修改元素的`position`属性（如`absolute`）并动态更新其`top`和`left`值来实现这种效果的。 ```css .list-move { transition: transform 1s; } ``` 然而，直接在CSS中定义`.list-move`可能不会按预期工作，因为Vue处理`v-move`的方式较为特殊。在实际应用中，你可能需要结合JavaScript钩子（如`@before-enter`、`@enter`、`@after-enter`等）和CSS变换（transform）来手动控制排序过渡的效果。 #### 13.2.4 复杂过渡效果 对于更复杂的过渡效果，如列表项以特定路径或模式移动，你可能需要借助JavaScript钩子来精确控制动画的每一个阶段。Vue的过渡系统提供了丰富的JavaScript钩子，允许你在过渡的不同阶段（如开始、激活、完成等）执行自定义逻辑。 ```html <transition-group @before-enter="beforeEnter" @enter="enter" @leave="leave" name="complex" tag="div" > <!-- 列表项 --> </transition-group> ``` 在JavaScript中，你可以定义这些钩子的处理函数，使用第三方动画库（如GSAP、Velocity.js）或原生JavaScript来操作DOM元素，实现复杂的动画效果。 ```javascript methods: { beforeEnter(el) { // 过渡开始前的准备工作 }, enter(el, done) { // 定义进入过渡逻辑 // 调用done()来标记过渡结束 }, leave(el, done) { // 定义离开过渡逻辑 // 同样调用done()来标记过渡结束 } } ``` #### 13.2.5 注意事项与最佳实践 - **使用`:key`**：为列表中的每个元素提供一个唯一的`:key`属性，这是使用`<transition-group>`时的关键。 - **性能优化**：复杂的过渡和动画可能会对性能产生影响，特别是在处理大量元素时。考虑只在必要时使用过渡效果，并优化动画的复杂度和持续时间。 - **兼容性**：虽然Vue的过渡系统设计得相当灵活，但不同浏览器对CSS动画和变换的支持程度可能有所不同。确保测试你的过渡效果在各种目标浏览器上的表现。 - **封装复用**：对于经常使用的过渡效果，考虑将其封装为可复用的组件或混合（mixins），以减少代码重复并提高可维护性。 通过掌握`<transition-group>`的用法和技巧，你可以在Vue.js项目中实现丰富而流畅的过渡效果，从而显著提升用户体验。希望本章节的内容能帮助你更好地理解和运用Vue的过渡系统。
上一篇：
13.1.5 使用JavaScript钩子函数实现动画
下一篇：
13.2.1 多元素过渡的用法
该分类下的相关小册推荐：
TypeScript和Vue从入门到精通(一)
Vue源码完全解析
Vue.js从入门到精通(二)
vue项目构建基础入门与实战
vuejs组件实例与底层原理精讲
VUE组件基础与实战
TypeScript和Vue从入门到精通(三)
移动端开发指南
Vue.js从入门到精通(一)
Vue3技术解密
TypeScript和Vue从入门到精通(四)
Vue.js从入门到精通(四)
