前面是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>