（23）Vue 中的动画特效——② 在 Vue 中使用 Animate.css 库 | Vue 基础理论实操
本文版权归 “公众号 | 前端一万小时” 所有，欢迎转载！
转载请注明出处，未经同意，不可修改文章内容。
🔥🔥🔥本系列文章已在“公众号 | 前端一万小时”更新完毕，有需要的小伙伴可按需前往查看。
🔥🔥🔥“前端一万小时”两大明星专栏——“从零基础到轻松就业”、“前端面试刷题”，已于本月大改版，合二为一，干货满满，欢迎点击公众号菜单栏各模块了解。
本节将学习更复杂的 Vue 中的 CSS 动画的使用。 接上一篇文章的代码，继续了解 Animate.css 动画库的使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>前端一万小时-在 Vue 中使用 Animate.css 库</title>
<script src="./vue.js"></script>
<style>
.fade-enter,
.fade-leave-to {
opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 1s;
}
</style>
</head>
<body>
<div id="root">
<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 keyframes
在上一篇中，我们只做了一个过渡动画效果。
现在来了解在 Vue 中如何使用 keyframes 这种形式的动画。
再复习一下
.fade-enter-active和.fade-leave-active什么时候生效：
- 当 div 在显示的过程中，
.fade-enter-active一直存在；- 当 div 在隐藏的过程中，
.fade-leave-active一直存在。
记住了这个特性，可以这样来改写代码：
<style>
@keyframes bounce-in { /* 2️⃣定义一个名叫 bounce-in 的 keyframes（CSS3 动画）； */
0% { /* 2️⃣-①：当元素 0% 时，scale（大小）是原来的 0 倍； */
transform:: scale(0);
}
50% { /* 2️⃣-②：当元素 50% 时，是原来大小的 1.5 倍； */
transform: scale(1.5);
}
100% { /* 2️⃣-③：当元素 100% 时，恢复原来大小。 */
transform: scale(1);
}
}
/* 1️⃣把 .fade-enter-active 和 .fade-leave-active 分开，同时里面的样式内容都去掉； */
.fade-enter-active {
transform-origin: left center; /* 4️⃣动画以左边中心为原点。 */
animation: bounce-in 1s; /* 3️⃣-①：使用 bounce-in 动画，让它在 1 秒钟运行结束； */
}
.fade-leave-active {
transform-origin: left center;
animation: bounce-in 1s reverse; /*
3️⃣-②：使用 bounce-in 动画，
让它在 1 秒钟反向运行结束；
*/
}
</style>
保存后，刷新网页查看效果：点击“切换”按钮后，隐藏/显示都有放大缩小的动画效果。
2 自定义 transition 类名
当使用 transition 标签时给它起名为“fade”， Vue 就会自动在标签上添加
.fade-enter-active和.fade-leave-active的类名。
❓如何让 transition 动画的类名短一些？ 比如变成 .enter 、.leave 。
答：可以在 transition 标签上自定义类名。
比如要自定义 .fade-enter-active 类名为“enter”，只需要在 transition 标签上添加 enter-active-class="enter" ：
<head>
<style>
@keyframes bounce-in {
0% {
transform:: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
/* 2️⃣把样式中的类名进行更改。 */
.enter {
transform-origin: left center;
animation: bounce-in 1s;
}
.leave {
transform-origin: left center;
animation: bounce-in 1s reverse;
}
</style>
</head>
<body>
<div id="root">
<!-- 1️⃣自定义 enter、leave 的类名； -->
<transition name="fade" enter-active-class="enter" leave-active-class="leave">
<div v-if="show">Hello，前端一万小时</div>
</transition>
<button @click="handleClick">切换</button>
</div>
保存后，返回刷新页面查看，动画效果依然正常：
3 Animate.css 库
借助自定义类名的功能，我们就可以在 Vue 项目中使用 Animate.css 库了。
打开 Animate.css 官网，可以看到它提供了非常多的 CSS 动画效果：
使用 Animate.css 库非常简单：
1️⃣点击 Download Animate.css 下载 Animate.css 文件至本地：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>前端一万小时-在 Vue 中使用 Animate.css 库</title>
<script src="./vue.js"></script>
<link rel="stylesheet" href="./animate.css"> <!-- 2️⃣在代码中引入 animate.css，
并删除我们自己写的动画样式； -->
</head>
<body>
<div id="root">
<transition
name="fade"
enter-active-class="animated swing"
leave-active-class="animated shake"
> <!-- 3️⃣隐藏/显示动画的类名上，都一定要有 animated：
加 animated 的意思是“我使用 Animate.css 库里的动画效果”。
4️⃣分别给显示/隐藏动画加上具体的效果名；
4️⃣-①：显示用上下抖动的动画效果 swing；
4️⃣-②：隐藏用左右抖动的动画效果 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>
保存后，返回页面查看使用了 Animate.css 库的效果：
❓使用 Animate.css 动画库有什么好处？
答：如果不想自己去写上面所讲的 keyframes、transition 等动画效果的代码，或是需要一些比较复杂的 CSS 动画效果时，就可以选择使用 Animate.css 库提供的动画效果。
❓使用 Animate.css 动画库有没有什么需要注意的问题？
答：
- 必须使用自定义 class 名字的形式来使用 Animate.css 库；
- class 类里面必须要包含 animated 类名，同时根据需求的不同，入场/出场动画具体要使用的动画效果名字要写在第二个类名上。
祝好，qdywxs ♥ you！
转载自:https://juejin.cn/post/7223981150775296057