前面是vue 自带的， 需要定义style 非常的烦， 怎么解决呢， 用第三方库就行了， 他已经定义好了css 样式，拿来直接用就行了 。
例子如下：
<transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duratio="300"><h3 v-if="flag" class="animated">动画类效果演示</h3></transition>
解析下：
- enter-active-class 相当于 vue 的 enter
- leave-active-class 相当于 vue 的leave 封装
- duration 设置 时间的
- class=“animated” 设置基本类 ，都是在这个继承的。
拿到全部的代码 可以尝试下，感受下效果 ：
<!DOCTYPE html>
<link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" ><link href="https://cdn.bootcss.com/flat-ui/2.3.0/css/flat-ui.min.css" rel="stylesheet"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>动画效果</title><meta name="description" content=""><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="../Documents/lib/animate.css"></head><body><div id="p"><input type="button" @click="flag=!flag" value="button"><transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="300"><h3 v-if="flag" class="animated">动画类效果演示</h3></transition></div><script>var vue= new Vue({el: '#p',data:{flag:false},methods:{dh(){}}})</script></body></html>