## 過渡動畫
> 可以使用CSS和JavaScript兩種方式實現過度動畫
### CSS方式
* 設置漸變的元素需要使用`<transition>`標簽進行包裹,并且給該標簽取一個名字。
~~~html
<button v-on:click="show = !show">
Toggle
</button>
<transition name="fade">
<img v-show="show" src="./assets/yue.jpg"/>
</transition>
~~~
~~~css
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
~~~
這樣就實現了一個漸變的效果了。
> 再嘗試一個例子，讓元素從上邊下來，然后往下邊出去。
~~~html
<transition name="fade">
<img v-show="show" src="./assets/yue.jpg"/>
</transition>
~~~
~~~css
.my-trans-enter-active, .my-trans-leave-active {
transition: all .5s ease-in-out;
}
.my-trans-enter{
transform: translateY(-500px);
opacity: 0;
}
.my-trans-leave-active{
transform: translateY(500px);
opacity: 0;
}
~~~
> 再嘗試一下組件的過渡變化
* 使用p標簽掛載動態組件
~~~html
<transition name="my-trans">
<!--<img v-show="show" src="./assets/yue.jpg"/>-->
<p :is="toggleCom"></p>
</transition>
~~~
* 導入兩個組件
~~~
import acom from './components/a'
import bcom from './components/b'
~~~
* 按鈕的點擊切換事件
~~~javascript
components: {
acom,
bcom
},
data(){
return {
toggleCom:"acom"
}
},
methods:{
toggle(){
if(this.toggleCom === "acom"){
this.toggleCom = "bcom"
}else{
this.toggleCom = "acom"
}
}
}
}
~~~
**過渡模式**
> 同時生效的進入和離開的過渡不能滿足所有要求，所以 Vue 提供了 過渡模式
* in-out：新元素先進行過渡，完成之后當前元素過渡離開。
* out-in：當前元素先進行過渡，完成之后新元素過渡進入。
* 用 out-in 重寫之前的開關按鈕過渡：
~~~html
<transition name="fade" mode="out-in">
<!-- ... the buttons ... -->
</transition>
~~~
### JS方式
> 可以在屬性中聲明 JavaScript 鉤子
~~~html
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled"
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled"
>
<!-- ... -->
</transition>
~~~
~~~javascript
// ...
methods: {
// --------
// 進入中
// --------
beforeEnter: function (el) {
// ...
},
// 此回調函數是可選項的設置
// 與 CSS 結合時使用
enter: function (el, done) {
// ...
done()
},
afterEnter: function (el) {
// ...
},
enterCancelled: function (el) {
// ...
},
// --------
// 離開時
// --------
beforeLeave: function (el) {
// ...
},
// 此回調函數是可選項的設置
// 與 CSS 結合時使用
leave: function (el, done) {
// ...
done()
},
afterLeave: function (el) {
// ...
},
// leaveCancelled 只用于 v-show 中
leaveCancelled: function (el) {
// ...
}
}
~~~
這些鉤子函數可以結合 CSS `transitions/animations` 使用，也可以單獨使用。
當只用 JavaScript 過渡的時候， 在 enter 和 leave 中，回調函數 done 是必須的 。否則，它們會被同步調用，過渡會立即完成。
推薦對于僅使用 JavaScript 過渡的元素添加 `v-bind:css="false"`，Vue 會跳過 CSS 的檢測。這也可以避免過渡過程中 CSS 的影響。
> 我們做個效果嘗試一下
~~~html
<button v-on:click="show = !show">
Toggle
</button>
<transition @before-enter = "beforeEnter"
@enter="enter"
@leave = "leave"
:css="false">
<img src="./assets/yue2.jpg" class="animate-p" v-show="show"></img>
</transition>
~~~
~~~javascript
beforeEnter:function(el){
el.style.opacity = 0;
el.style.left = '-500px';
},
enter:function(el,done){
Velocity(el,{
left:0,
opacity:1
},{
duration:1500,
complete:done
});
},
leave:function(el,done){
Velocity(el,{
left:'500px',
opacity:0
},{
duration:1500,
complete:done
})
}
~~~
~~~css
.animate-p{
position: absolute;
top: 0;
left: 0;
}
~~~
