（24）Vue 中的动画特效——③ 在 Vue 中同时使用过渡和动画 | Vue 基础理论实操
本文版权归 “公众号 | 前端一万小时” 所有，欢迎转载！
转载请注明出处，未经同意，不可修改文章内容。
🔥🔥🔥本系列文章已在“公众号 | 前端一万小时”更新完毕，有需要的小伙伴可按需前往查看。
🔥🔥🔥“前端一万小时”两大明星专栏——“从零基础到轻松就业”、“前端面试刷题”，已于本月大改版，合二为一，干货满满，欢迎点击公众号菜单栏各模块了解。
打开上一篇的最终代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>前端一万小时-在 Vue 中同时使用过渡和动画</title>
<script src="./vue.js"></script>
<link rel="stylesheet" href="./animate.css">
</head>
<body>
<div id="root">
<transition name="fade" enter-active-class="animated swing" leave-active-class="animated shake">
<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 初始渲染的过渡
❓如果想让元素在第一次显示时就有动画效果应该怎么做呢？
答：只需要在 transition 标签上增加一些内容。
<div id="root">
<!-- ❗️为了看起来更清楚，我们在标签里换行写。 -->
<transition
name="fade"
appear
enter-active-class="animated swing"
leave-active-class="animated shake"
appear-active-class="animated swing"
> <!-- 1️⃣增加 appear 属性：让第一次显示元素也有过渡效果；
2️⃣增加一个自定义的类名 appear-class，让它等于显示时的类名，
即 appear-active-class="animated swing"
（意思是：让第一次显示元素的过渡效果使用 Animate.css 库中的 swing 动画效果）。 -->
<div v-if="show">Hello，前端一万小时</div>
</transition>
<button @click="handleClick">切换</button>
</div>
在这里，用的是 Animate.css 库，而实际上，Animate.css 库提供的动画类型就是封装好的 CSS3 的 @keyframes 动画效果。除了这两种动画效果，我们还学习过一种叫“过渡”的动画效果。
2 同时使用过渡和动画
❓如何让入场动画同时有过渡和 CSS3 动画？
答：可以在使用了 CSS3 动画的基础上，再加上过渡动画效果。
<head>
<meta charset="UTF-8">
<title>前端一万小时-在 Vue 中同时使用过渡和动画</title>
<script src="./vue.js"></script>
<link rel="stylesheet" href="./animate.css">
<style> /* 2️⃣写上过渡效果的样式代码。 */
.fade-enter,
.fade-leave-to {
opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 3s;
}
</style>
</head>
<body>
<div id="root">
<transition
name="fade"
appear
enter-active-class="animated swing fade-enter-active"
leave-active-class="animated shake fade-leave-active"
appear-active-class="animated swing"
> <!-- 1️⃣自定义类名上分别增加 fade-enter-active 和 fade-leave-active； -->
<div v-if="show">Hello，前端一万小时</div>
</transition>
<button @click="handleClick">切换</button>
</div>
保存后，刷新页面查看效果，隐藏/显示渐隐渐现的同时也有 Animate.css 库中的动画效果（即 CSS3 动画效果）：
3 设置动画时长
❓过渡动画 opacity 变化执行时间是 3 秒，Animate.css 提供的动画执行时间是多长？两种动画时间一样长吗？
答：打开 Animate.css 的源码，发现 .animated 它定义的时间是 1 秒，即我们使用的 swing 和 shake 动画执行时间是 1 秒。
❓当两种动画执行时间不一致时，如何确定动画时长？
答：当两种动画执行时间不一致时，可以手动设置以其中一种动画的时长作为总的动画执行时长。
例如在我们的动画中，若以相对较长的 3 秒来作为整个动画执行的时间，只需要在 transition 标签上加一句 type="transition" 。
<div id="root">
<!-- ❗️指定以 transition 的时长为准。 -->
<transition
type="transition"
name="fade"
appear
enter-active-class="animated swing fade-enter-active"
leave-active-class="animated shake fade-leave-active"
appear-active-class="animated swing"
>
<div v-if="show">Hello，前端一万小时</div>
</transition>
<button @click="handleClick">切换</button>
</div>
保存，刷新页面查看，隐藏/显示时 3 秒动画结束：
4 定制动画时长
❓能否不以某一种动画时长为准，自己定义动画的总时长呢？
答：可以。
- 让入场/出场动画时长相同：把 transition 中的
type="transition"移除，增加:duration="5000"，就自定义了动画时长为 5 秒。
<div id="root">
<!-- ❗️移除 type，增加 :duration。 -->
<transition
:duration="5000"
name="fade"
appear
enter-active-class="animated swing fade-enter-active"
leave-active-class="animated shake fade-leave-active"
appear-active-class="animated swing"
>
<div v-if="show">Hello，前端一万小时</div>
</transition>
<button @click="handleClick">切换</button>
</div>
打开检查进入控制台，然后选到 Hello，前端一万小时 这个 div 元素。刷新页面后，点击“切换”按钮：
可以看到，3 秒结束后内容已经隐藏了，但动画并没有执行完，fade-leave-active 和 fade-leave-to 一直都在，要等 5 秒才会被清除。
- 分别给入场/出场动画定制动画时长：比如设置入场动画的时长 3 秒，出场动画的时长 5 秒。
<div id="root">
<!-- ❗️在 {} 中分别给 enter 和 leave 设置时长。 -->
<transition
:duration="{enter: 3000, leave: 5000}"
name="fade"
appear
enter-active-class="animated swing fade-enter-active"
leave-active-class="animated shake fade-leave-active"
appear-active-class="animated swing"
>
<div v-if="show">Hello，前端一万小时</div>
</transition>
<button @click="handleClick">切换</button>
</div>
保存后，刷新页面查看：
祝好，qdywxs ♥ you！