[TOC]
## 1.創建動畫
- 當一個標簽被transition包裹的時候,vue會自動給我們構建一個動畫流程。
> Enter的動畫表示顯示的動畫
> Tip:重點關注fade-enter的值
> Leave的動畫表示消失的動畫
> Tip:重點關注fade-leave-to的值
- fade-enter-active,fade-leave-active監聽動畫的過程
## 2.實現動畫
- css
```
.fade-enter{
opacity: 0;
}
.fade-enter-active{
transition: opacity 3s;
}
.fade-leave-to{
opacity:0;
}
.fade-leave-active{
transition: opacity 4s;
}
```
- html
```
<div id="app">
<transition name="fade">
<div v-if="isShow">hello world</div>
</transition>
<button @click="handleClick">切換</button>
</div>
```
- js
```
new Vue({
el:"#app",
data:{
isShow:false
},
methods:{
handleClick(){
this.isShow = !this.isShow;
}
}
})
```
