[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;
}
}
})
```
