爲什麼 要使用動畫，目的就一個提高用戶體驗，
我們一般 用在 位移 和 淡進淡出的情況。
下邊我們舉個例子， 用v-if 控制元素的顯示和不顯示，顯示和不顯示之間 用動畫效果，
思路如下：
- 創建一個h3標籤， 並插值 ，
- 設置v-if=“flag” , 並創建vue 對象， 在data裏添加flag 爲false
- 創建一個button ，然後綁定一個click 時間， @click=”flag=!flag“
- 上邊的效果爲 ，點擊一次顯示 h3 ，再點擊一次就消失
- 使用transition 標籤 把需要動畫的部分包裹起來 ，也就是h3 要包裹起來。
- 建立一些style 樣式 ，控制動畫的行爲,參考下部分的內容
在進入/離開的過渡中，會有 6 個 class 切換。
v-enter：定義進入過渡的開始狀態。在元素被插入之前生效，在元素被插入之後的下一幀移除。
v-enter-active：定義進入過渡生效時的狀態。在整個進入過渡的階段中應用，在元素被插入之前生效，在過渡/動畫完成之後移除。這個類可以被用來定義進入過渡的過程時間，延遲和曲線函數。
v-enter-to: 2.1.8版及以上 定義進入過渡的結束狀態。在元素被插入之後下一幀生效 (與此同時 v-enter 被移除)，在過渡/動畫完成之後移除。
v-leave: 定義離開過渡的開始狀態。在離開過渡被觸發時立刻生效，下一幀被移除。
v-leave-active：定義離開過渡生效時的狀態。在整個離開過渡的階段中應用，在離開過渡被觸發時立刻生效，在過渡/動畫完成之後移除。這個類可以被用來定義離開過渡的過程時間，延遲和曲線函數。
v-leave-to: 2.1.8版及以上 定義離開過渡的結束狀態。在離開過渡被觸發之後下一幀生效 (與此同時 v-leave 被刪除)，在過渡/動畫完成之後移除。
完整的代碼如下：
非常的炫酷
<!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="">
<style>
.v-enter,.v-leave-to{
opacity: 0;
transform: translateY(100px);
background-color: green;
color: red;
}
.v-enter-to,.v-leave{
opacity: 1;
color: red;
background-color: green;
}
.v-enter-active,.v-leave-active{
transition: all 4s ease;
}
</style>
</head>
<body>
<div id="p">
<input type="button" @click="flag=!flag" value="button">
<transition>
<h3 v-if="flag">動畫類效果演示</h3>
</transition>
</div>
<script>
var vue= new Vue(
{
el: '#p',
data:{
flag:false
},
methods:{
dh(){
}
}
}
)
</script>
</body>
</html>