上一节我们学习了Vue 2.0中的<transition>实现元素从状态A到状态B的过渡效果。对于元素过渡的效果是通过CSS的transition来完成，具体什么时候执行是由Vue来控制的。而transition的效果毕竟有所限制，对于一些复杂的动效，还是需要通过别的方式来完成。在Vue中除了transition之外还可以完成animation的效果。也就是可以将CSS的animation运用到Vue中来，实现一些动画效果。今天这篇文章我们就来学习如何在Vue运用CSS的animation。

回忆一下CSS中的animation

CSS的animation已经不是什么新技术了，在Web上随处都有可能看到CSS的animation实现的动效。而且社区中有关于使用animation实现动画的库也非常的多，比如@Daniel Eden的Animate.CSS：

在CSS中animation的原理非常的简单，首先要通过@keyframes声明一个动画，然后通过animation-name来调用声明好的动画名。当然animation还提供了其他的属性来帮助我们更好的控制CSS动画。有关于CSS的动画相关的介绍，这里不做过多的阐述，如果你感兴趣的话可以点击这里 或这里进行了解。

在这里我们来看一个简单的动画案例：

有关于CSS 动画相关的代码就不贴出来了，感兴趣的话可以直接查看上面的Demo。那么我们接下来看看在Vue中怎么运用CSS的animation来实现动效。

Vue中的animation

在Vue中实现animation效果的用法和transition类似，同样是把需要设有动效的元素放置在<transition>中。animation和transition不同的是在animation中v-enter类名在节点插入DOM后不会立即删除，而是在animationEnd事件触发时删除。比如下面这个示例：

<!-- Bounce.vue -->
<template>
    <div class="animation">
        <button @click="isToggle" :class="isShow ? 'is-show' : 'is-hidden'">
            {{ isShow ? "隐藏" : "显示" }}
        </button>
        <transition name="bounce">
            <div class="animation-el" v-if="isShow"></div>