本文版权归 “公众号 | 前端一万小时” 所有，欢迎转载！
转载请注明出处，未经同意，不可修改文章内容。
🔥🔥🔥本系列文章已在“公众号 | 前端一万小时”更新完毕，有需要的小伙伴可按需前往查看。
🔥🔥🔥“前端一万小时”两大明星专栏——“从零基础到轻松就业”、“前端面试刷题”，已于本月大改版，合二为一，干货满满，欢迎点击公众号菜单栏各模块了解。
涉及面试题：
提供 transitions 有什么可能的方式？
[编号：vue_25]
打开编辑器，准备一份有一个简单功能的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>前端一万小时-Vue 中的 JS 动画与 Velocity.js 的结合</title>
<script src="./vue.js"></script>
<link rel="stylesheet" href="./animate.css">
</head>
<body>
<div id="root">
<!-- ❗️transition 标签中包裹了一个 div，点击“切换”按钮可显示/隐藏。 -->
<transition name="fade">
<div v-if="show">Hello，前端一万小时</div>
</transition>
<button @click="handleClick">切换</button>
</div>
<script>
var vm = new Vue({
el: "#root",
data: {
show: true
},
methods: {
handleClick: function() {
this.show = !this.show
}
}
})
</script>
</body>
</html>
1 Vue 中通过 JS 实现动画
在之前使用动画时，我们都是通过 CSS 来实现。
❓有没有办法通过 JS 实现动画效果呢？
答：有，Vue 中提供了很多 JS 动画的钩子，可以用来实现动画效果。
<div id="root">
<transition
name="fade"
@before-enter="handleBeforeEnter"
@enter="handleEnter"
@after-enter="handleAfterEnter"
> <!-- 1️⃣绑定 before-enter 事件，当它被触发时执行 handleBeforeEnter 函数；
2️⃣绑定 enter 事件，当它被触发时执行 handleEnter 函数；
3️⃣
3️⃣-①：绑定 after-enter 事件，调用 done 回调函数后被触发，执行 handleAfterEnter 函数；-->
<div v-if="show">Hello，前端一万小时</div>
</transition>
<button @click="handleClick">切换</button>
</div>
<script>
var vm = new Vue({
el: "#root",
data: {
show: true
},
methods: {
handleClick: function() {
this.show = !this.show
},
handleBeforeEnter: function(el) { /*
1️⃣-①：handleBeforeEnter 接收一个 el 参数，
这里即 div 元素；
*/
el.style.color = "red" // 1️⃣-②：动画执行前，让元素的样式变为红色；
},
handleEnter: function(el, done) { // 2️⃣-①：handleEnter 接收 el 和 done 两个参数；
setTimeout(() => {
el.style.color = "green"
}, 2000) // 2️⃣-②：动画开始，2 秒后让颜色变为绿色；
setTimeout(() => {
done()
}, 4000) // 2️⃣-③：4 秒后调用 done 回调函数，动画结束；
},
handleAfterEnter: function(el) {
el.style.color = "#000" // 3️⃣-②：动画结束后，让元素变为黑色。
}
}
})
</script>
用 JS 实现的动画效果：
上面我们只添加了入场动画效果，出场动画对应的 JS 钩子是：before-leave、leave 和 after-leave，它们的用法 与 before-enter、enter 和 after-enter 完全一致。
<div id="root">
<transition
name="fade"
@before-enter="handleBeforeEnter"
@enter="handleEnter"
@after-enter="handleAfterEnter"
@before-leave="handleBeforeLeave"
@leave="handleLeave"
@after-leave="handleAfterLeave"
> <!-- 1️⃣绑定 before-leave 事件，当它被触发时执行 handleBeforeLeave 函数；
2️⃣绑定 leave 事件，当它被触发时执行 handleLeave 函数；
3️⃣绑定 after-leave 事件，调用 done 回调函数后被触发，执行 handleAfterLeave 函数； -->
<div v-if="show">Hello，前端一万小时</div>
</transition>
<button @click="handleClick">切换</button>
</div>
<script>
var vm = new Vue({
el: "#root",
data: {
show: true
},
methods: {
handleClick: function() {
this.show = !this.show
},
handleBeforeEnter: function(el) {
el.style.color = "red"
},
handleEnter: function(el, done) {
setTimeout(() => {
el.style.color = "green"
}, 2000)
setTimeout(() => {
done()
}, 4000)
},
handleAfterEnter: function(el) {
el.style.color = "#000"
},
handleBeforeLeave: function(el) { // 1️⃣-①：handleBeforeLeave 接收一个 el 参数；
el.style.color = "red" // 1️⃣-②：动画执行前，让元素的样式变为红色；
},
handleLeave: function(el, done) { // 2️⃣-①：handleLeave 接收 el 和 done 两个参数；
setTimeout(() => {
el.style.color = "green"
}, 2000) // 2️⃣-②：动画开始，2 秒后让颜色变为绿色；
setTimeout(() => {
done()
}, 4000) // 2️⃣-③：4 秒后调用 done 回调函数，动画结束；
},
handleAfterLeave: function(el) { // 3️⃣-①：handleAfterLeave 接收一个 el 参数；
el.style.color = "#000" // 3️⃣-②：动画结束后，让元素变为黑色。
}
}
})
</script>
[
