首页
技术小册
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.1.2 过渡的类名：深入Vue.js动画与过渡的精髓 在Vue.js的开发旅程中，过渡和动画不仅是提升用户体验的关键手段，也是展现开发者创造力的舞台。`vue-transition`或`<transition>`与`<transition-group>`组件为Vue应用中的元素进出、列表更新等场景提供了丰富的动画支持。而深入理解过渡的类名机制，则是掌握Vue动画与过渡技术的核心。本章将详细探讨Vue.js中过渡的类名机制，包括其工作原理、自定义类名方法以及在实际项目中的应用。 #### 13.1.2.1 过渡类名的工作机制 Vue.js通过动态添加和移除CSS类来控制元素的过渡效果。当元素进入或离开DOM时，Vue会自动应用一系列特定的类名到这些元素上，以触发CSS动画或过渡效果。这些类名遵循一定的命名规则，使得开发者能够轻松地定义和应用自己的动画样式。 - **进入过渡的类名**： - `.v-enter`：定义进入过渡的开始状态。在元素被插入之前生效，在插入之后的第一帧移除。 - `.v-enter-active`：定义进入过渡生效时的状态。在整个进入过渡阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类名可以定义过渡的时间、延迟和曲线函数等。 - `.v-enter-to`（Vue 2.1.8+）：定义进入过渡的结束状态。在过渡/动画完成之后被添加，下一帧后立即移除。这个类名主要用于在过渡完成后，确保元素回到其最终状态（如果`v-enter-active`中的样式与最终状态不一致）。 - **离开过渡的类名**： - `.v-leave`：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧移除。 - `.v-leave-active`：定义离开过渡生效时的状态。在整个离开过渡阶段中应用，直到过渡/动画完成后移除。 - `.v-leave-to`（Vue 2.1.8+）：定义离开过渡的结束状态。在离开过渡完成后被添加，下一帧后立即移除。 这些类名提供了极大的灵活性，允许开发者通过CSS控制动画的每一个细节，从而实现丰富多样的过渡效果。 #### 13.1.2.2 自定义过渡类名 虽然Vue.js提供了默认的过渡类名，但在某些情况下，我们可能希望使用自定义的类名来更好地管理样式或避免命名冲突。Vue允许我们通过`<transition>`组件的`name`属性来自定义这些类名。 ```html <transition name="fade"> <!-- ... --> </transition> ``` 当设置了`name`属性后，Vue会根据这个值来生成新的类名： - 进入过渡：`.fade-enter`、`.fade-enter-active`、`.fade-enter-to` - 离开过渡：`.fade-leave`、`.fade-leave-active`、`.fade-leave-to` 这种机制使得我们可以为不同的过渡效果定义不同的类名集合，从而更加灵活地管理样式。 #### 13.1.2.3 过渡类名的实际应用 ##### 示例一：简单的淡入淡出效果 要实现一个元素的淡入淡出效果，我们可以首先定义相应的CSS样式，然后通过`<transition>`组件应用这些样式。 ```css .fade-enter-active, .fade-leave-active { transition: opacity 0.5s; } .fade-enter, .fade-leave-to /* .fade-leave-active 在 <2.1.8 版本中 */ { opacity: 0; } ``` HTML部分： ```html <transition name="fade"> <div v-if="show">Hello, Vue!</div> </transition> ``` 通过点击按钮切换`show`的值，就可以观察到淡入淡出的效果。 ##### 示例二：列表的动态过渡 对于列表的添加、删除等操作，`<transition-group>`组件提供了更高级的支持。它不仅可以应用过渡效果到单个元素，还可以对整个列表的变更进行动画处理。 ```html <transition-group name="list" tag="div"> <div v-for="(item, index) in items" :key="index" class="list-item"> {{ item.text }} </div> </transition-group> ``` CSS部分： ```css .list-enter-active, .list-leave-active { transition: opacity 1s, transform 1s; } .list-enter, .list-leave-to /* .list-leave-active 在 <2.1.8 版本中 */ { opacity: 0; transform: translateY(30px); } ``` 在这个例子中，当列表项被添加或删除时，它们会沿着Y轴向下移动并逐渐淡出，提供了平滑的视觉过渡效果。 #### 13.1.2.4 进阶应用：JavaScript钩子与第三方库 除了使用CSS类名来定义过渡效果外，Vue还允许我们通过JavaScript钩子函数来编写更复杂的逻辑，甚至集成第三方动画库（如Animate.css、GSAP等）。 ```html <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" @enter-cancelled="enterCancelled" ... > <!-- ... --> </transition> ``` 在JavaScript钩子中，我们可以直接操作DOM元素，或者使用第三方库来创建复杂的动画效果。这为Vue的过渡系统提供了无限的扩展性和可能性。 #### 13.1.2.5 小结 过渡的类名机制是Vue.js动画与过渡系统的基石。通过理解这些类名的工作原理和自定义方法，我们可以轻松地实现丰富的动画效果，提升应用的用户体验。同时，结合JavaScript钩子函数和第三方动画库，我们还能进一步拓展Vue的过渡能力，创造出更加复杂和炫酷的动画效果。在编写Vue应用时，合理利用这些技术，将会为你的项目增添不少亮点。
上一篇：
13.1.1 CSS过渡
下一篇：
13.1.3 自定义过渡的类名
该分类下的相关小册推荐：
Vue.js从入门到精通(四)
TypeScript和Vue从入门到精通(二)
vuejs组件实例与底层原理精讲
TypeScript和Vue从入门到精通(四)
Vue3技术解密
TypeScript和Vue从入门到精通(五)
Vue原理与源码解析
TypeScript和Vue从入门到精通(三)
Vue.js从入门到精通(二)
移动端开发指南
TypeScript和Vue从入门到精通(一)
Vue.js从入门到精通(一)
