首页
技术小册
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.5 使用JavaScript钩子函数实现动画 在Vue.js中，动画与过渡不仅是提升用户体验的关键元素，也是展示开发者对Vue深入理解和应用能力的窗口。Vue通过内置的`<transition>`和`<transition-group>`组件提供了声明式的过渡和动画支持，但有时候，基于项目特定的需求或是对性能的更精细控制，使用JavaScript钩子函数来实现动画会是一个更灵活、更强大的选择。本章将深入探讨如何在Vue组件中利用JavaScript钩子函数来创建动画效果。 #### 13.1.5.1 理解Vue的过渡与动画系统 在深入探讨JavaScript钩子函数之前，先简要回顾Vue的过渡与动画基础。Vue的`<transition>`和`<transition-group>`组件通过包裹要过渡的元素，并利用CSS类或JavaScript钩子函数来控制这些元素的进入、离开及列表的更新动画。Vue会自动侦测目标元素是否应用了CSS过渡或动画，并在适当的时机添加/移除CSS类。 然而，当CSS不足以满足需求时（比如需要动态计算动画属性或基于复杂逻辑控制动画），就可以利用JavaScript钩子函数来编写更复杂的动画逻辑。 #### 13.1.5.2 JavaScript钩子函数概览 Vue为`<transition>`和`<transition-group>`组件提供了一系列JavaScript钩子函数，允许你在动画的各个阶段插入自定义的JavaScript代码。这些钩子包括： - `beforeEnter(el)` - `enter(el, done)` - `afterEnter(el)` - `enterCancelled(el)` - `beforeLeave(el)` - `leave(el, done)` - `afterLeave(el)` - `leaveCancelled(el)` - `beforeAppear`、`appear`、`afterAppear`、`appearCancelled`（仅在初始渲染时触发） 每个钩子函数都接收一个`el`参数，表示被过渡的DOM元素。对于需要异步完成的动画，`enter`和`leave`钩子还提供了一个`done`回调函数，作为动画完成的信号。 #### 13.1.5.3 使用JavaScript钩子函数实现动画 ##### 示例：简单淡入淡出动画 以下是一个使用JavaScript钩子函数实现简单淡入淡出动画的示例。假设我们有一个Vue组件，其模板部分包含一个需要淡入淡出的`<div>`元素： ```html <template> <div> <button @click="show = !show">Toggle Fade</button> <transition @before-enter="beforeEnter" @enter="enter" @leave="leave" > <div v-if="show" class="fade-box"> Hello, Vue! </div> </transition> </div> </template> <script> export default { data() { return { show: false }; }, methods: { beforeEnter(el) { el.style.opacity = 0; }, enter(el, done) { // 使用requestAnimationFrame或setTimeout来实现平滑过渡 const duration = 500; let start = null; const opacity = el.style.opacity; (function fade() { if (start === null) start = Date.now(); const time = Date.now() - start; if (time < duration) { el.style.opacity = (time / duration) * opacity; requestAnimationFrame(fade); } else { done(); } })(); }, leave(el, done) { // 类似地，实现淡出效果 const duration = 500; let start = null; (function fade() { if (start === null) start = Date.now(); const time = Date.now() - start; if (time < duration) { el.style.opacity = 1 - (time / duration); requestAnimationFrame(fade); } else { done(); } })(); } } } </script> <style> .fade-box { transition: opacity 0.5s ease; /* 虽然这里定义了CSS过渡，但实际动画由JS控制 */ opacity: 1; } </style> ``` 在这个例子中，我们通过在Vue组件的`methods`中定义`beforeEnter`、`enter`和`leave`方法，并在`<transition>`组件上通过`@`（或`v-on:`）监听器绑定这些方法来控制动画。`enter`和`leave`方法中，我们使用了`requestAnimationFrame`来创建平滑的动画效果，并通过调用`done`回调函数来通知Vue动画已完成。 ##### 进阶：动态计算动画属性 在更复杂的场景中，你可能需要根据组件的状态或其他条件动态计算动画属性。例如，你可能想要根据元素的位置或大小来动态调整动画的持续时间或缓动函数。 这通常涉及在`enter`或`leave`钩子中访问组件的数据属性或计算属性，并据此调整动画逻辑。你可以通过`this`关键字在钩子函数内部访问组件实例及其属性。 ##### 注意事项 - 使用JavaScript钩子函数实现动画时，应确保`done`回调函数在动画结束时被调用，以避免Vue的DOM更新被阻塞。 - 考虑到性能因素，尽量避免在动画中执行重计算或DOM查询，除非绝对必要。 - 结合CSS过渡和动画使用JavaScript钩子函数可以提供更丰富的动画效果，但应注意两者之间的协同工作，避免冲突。 #### 13.1.5.4 结论 通过利用Vue提供的JavaScript钩子函数，你可以实现比单纯依赖CSS更灵活、更强大的动画效果。这种方法尤其适用于需要动态计算动画属性或基于复杂逻辑控制动画的场景。然而，也应注意到使用JavaScript钩子函数可能会增加代码的复杂性和维护成本，因此在选择实现方式时应权衡利弊。 在本章中，我们学习了如何使用Vue的JavaScript钩子函数来实现简单的淡入淡出动画，并探讨了如何根据组件状态动态调整动画属性。通过掌握这些技巧，你将能够在Vue项目中创建更加丰富、引人入胜的用户界面。
上一篇：
13.1.4 CSS动画
下一篇：
13.2 多元素过渡
该分类下的相关小册推荐：
VUE组件基础与实战
vue项目构建基础入门与实战
Vue.js从入门到精通(二)
Vue.js从入门到精通(四)
Vue面试指南
移动端开发指南
TypeScript和Vue从入门到精通(二)
TypeScript和Vue从入门到精通(五)
Vue3技术解密
TypeScript和Vue从入门到精通(三)
vuejs组件实例与底层原理精讲
Vue源码完全解析
