一些解释
CSS3 时代，动画不再必须依赖 js，变得更加简单、高效。
首先介绍一个常用动画库 animate.css，这里是它的 github 仓库
看看效果
先通过 cdn 方式引入
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
<style>
.target{
background: #f0f;
width: 100px;
height: 100px;
animation: bounceIn 1s;
}
</style>
<div class="target"></div>
刷新页面，就可以看到动画效果。
如果想让动画多动几下，可以添加 animation-iteration-count:3;到 .targetclass 下。
这样，动画就会播放三次，当然，也是刷新页面才能看到，看一下。
animation-iteration-count用来设置动画播放的次数。
或者，想让动画循环播放，可以设置播放次数为 infinite。看一下。
或者，想让动画放慢一点，可以设置动画的持续时间为 3 秒，这里的持续时间是一次动画的持续时间。
如果不设置动画播放次数（默认播放一次），那么动画就会持续 3 秒。
如果设置为 3 次，那么动画总时长就是 9 秒。
而设置为 infinite 则表示，每一次动画的播放时间是 3 秒，看一下。
或者，换个动画效果，试试 rollIn、zoomIn
这里有更多好玩的动画效果。
以上代码中，bounceIn、rollIn、zoomIn 这样的效果是由 animate.css 实现的。
刚接触 animate.css 时，我以为那些动画很难实现，后来发现我错了。
创建动画
现在把 cdn 移除掉，开始手写动画效果
@keyframes myFadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.target{
background: #f0f;
width: 100px;
height: 100px;
animation: myFadeIn 1s;
}
替换掉原来的 css 代码，看看效果。
这里也可以试试修改动画持续时间、播放次数。
下面我们来解释 @keyframes 那一坨代码。
- @keyframes 用来定义一个动画，其后的第一个单词，就是动画的名字（上面代码中的 myFadeIn）
- 最外层括号里的内容，就是动画的效果
- from 和 to 分别定义两个状态，表示，动画是由 from 变成 to
就是这么简单，现在可以添加其他 css 属性，试试上面所说的东西。
from 和 to 定义动画开始和结束时的状态，除此之外，还可以定义一些中间状态，比如动画进度条在 50% 时的状态：
@keyframes myFadeIn {
from {
background: #f00;
}
50% {
background: #fff;
}
to {
background: #000;
}
}
可以去看下效果。
同样的，也可以定义 20%、40%、51% 时的效果。
翻开 animate.css 的源码，不难发现，里面的内容不比我们目前知道的内容多出多少（比如这个），无非就是多定义了一些中间状态。
推荐使用 transform。对形状的定义更丰富。
使用动画
上面有个变宽的例子，元素的宽度由 10 变成 500，之后，又立刻回复到原来的宽度（100px）。
那么如果我们想让动画停留在 500px 宽呢？
添加 animation-fill-mode 属性就可以了：
@keyframes myFadeIn {
from {
background: #f00;
width: 10px;
}
to {
background: #000;
width: 500px;
}
}
.target{
background: #f0f;
width: 100px;
height: 100px;
animation: myFadeIn 1s;
animation-fill-mode: forwards;
}
类似的属性还有很多，可以看看 w3 的这篇文档
当然，mdn 的文档更全面。
码者建议，不要试图记住每一个属性，而是需要的时候，去查一查。
在 vue 中的使用
当前的 vue 最新版本是 2.6，以下代码除了 vue，没有其他依赖
<style>
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.target-enter-active {
animation: fadeIn 1s;
}
.target-leave-active {
animation: fadeIn 1s;
animation-direction: reverse;
}
<style>
<template>
<button @click="show=!show">click</button>
<transition name="target">
<div v-if="show">hello</div>
</transition>
</template>
<script>
export default {
data(){
return {
show: false
}
}
}
</script>
看看效果。
在 vue 中使用动画：
- 只需要把动画的元素用 transition 标签包起来
- 给这个 transition 标签一个名字（比如 target）
- 添加入场动画 class 类名是“标签名字 + enter-active”
- 定义动画效果（@keyframes）
这样，元素（或者组件）在 v-if、v-show 切换时，动画效果就会显示出来。
更多内容请参考 vue 的文档
其他
提醒
尽管上面为了方便，提供了对应代码的在线测试，但是码者还是建议手写一遍，感受一下用 animation 写动画的过程。
兼容性
animation 的兼容性一直是一个问题，古老的浏览器是不支持的，用的时候，应先查查。
但是，animation 无疑具有很好的发展前景。
参考
