Vue 過渡 && 動畫
一、CSS過渡
1.transition標簽可以用來封裝需要過渡的元素，添加entering/leaving 過渡，
條件是：
（1）使用條件渲染語句 v-if/v-show
（2）動態組件
（3）組件根節點
通過style標簽設置過渡動畫時需要為transition指定name屬性，當指定了name屬性之后，
vue會自動去找幾個過渡動畫需要的類
active類中一般放過渡屬性，例如transition,animation等，放animation需要指定動畫關鍵幀
（v-是這些類名的前綴，會被替換為transition中name屬性）
v-enter-active（進入中，過渡狀態）
v-enter（進入之前，開始過渡狀態）
v-enter-to(進入結束，開始過渡的結束狀態) 一般不用
v-leave-active（離開中，過渡狀態）
v-leave（離開前，離開過渡狀態）
v-leave-to(離開結束，離開過渡的結束狀態) 一般不用
二、CSS動畫
1.CSS動畫同CSS過渡,也需要四個類，active類中放的是animation,需要指定關鍵幀，關鍵幀使用transform定義動畫狀態，當設置了transition的name屬性之后，vue會自動去探測是否存在這幾個類，如果有，就執行了類中的動畫
2.自定義動畫，通常用於和第三方動畫庫相結合
<transition
enter-active-class="animated tada"
leave-active-class="animated bounceOutRight"
>
<p v-if="show">hello</p>
</transition>
為transition標簽設置以下幾個屬性來指定動畫需要的類,這幾個類的優先級高於普通類，與第三方動畫庫相結合時十分有用
(1)enter-active-class
(2)enter-class
(3)enter-to-class
(4)leave-active-class
(5)leave-class
(6)leave-to-class
三、使用鈎子函數設置動畫
可以通過在transition標簽中綁定鈎子函數來設置過渡動畫，幾個鈎子函數如下：
| 鈎子函數 | 對應的參數 |
|---|---|
| before-enter | (el) |
| enter | (el,done) |
| after-enter | (el) |
| enter-cancelled | (el) |
| before-leave | (el) |
| leave | (el,done) |
| after-leave | (el) |
| leave-cancelled | (el) |
通常在before-enter或before-leave中指定狀態，在enter或leave函數中執行動畫
beforeEnter: function (el) {
// 進入之前
$(el).css({
opacity: 0,
color: 'red',
});
},
enter: function (el, done) {
// 第一種
$(el).animate({
opacity:1,
},3000,function(){
//需要在動畫執行完畢的回調函數中調用done
done();
})
// 第二種
$(el).fadeIn(1000,()=>{
done();
})
// 第三種 引入velocity動畫庫
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
Velocity(el, {opacity: 1, translateX: '20px', fontSize: '2em'}, {duration: 300});
Velocity(el, {translateX: '0px', fontSize: '1em'}, {complete: done})
},
當只用 JavaScript 過渡的時候， 在 enter 和 leave 中，回調函數 done 是必須的 。 否則，它們會被同步調用，過渡會立即完成。
四、初始渲染的過渡
通過為transition標簽添加appear屬性設置節點在初始渲染時的過渡效果
-
同樣可以定義自定義類名
appear-class
appear-to-class
appear-active-class -
通過可以定義JavaScript中的鈎子函數
before-appear
appear
after-appear
appear-cancelled -
為transiton設置appear屬性，如果沒有對應的過渡類或者鈎子函數會默認去執行before-enter,和enter鈎子函數的內容
五、多元素的過渡
注意相同標簽切換需要設置key屬性：
當有相同標簽名的元素切換時，需要通過 key 特性設置唯一的值來標記以讓 Vue 區分它們，否則 Vue 為了效率只會替換相同標簽內部的內容
transition標簽內部最外部根節點只能有一個，但通過v-if,v-else-if,v-else設置切換時候可以有多個跟標簽
六、過渡模式
為transition標簽設置mode屬性
(1)in-out:新元素先進行過渡，完成之后當前元素過渡離開
(2)out-in:當前元素先進行過渡，完成之后新元素過渡進入
七、多組件過渡
使用v-bind:is屬性為保留組件component來指定要渲染成哪個組件
<transition name="component-fade" mode="out-in">
<component v-bind:is="view"></component>
</transition>
八、列表過渡
使用tranistio-group標簽來為多個節點設置過渡
tranistio-group標簽默認渲染成span標簽，可通過為其設置tag="div"屬性將其渲染成div
tranistio-group內部元素總是需要 提供唯一的 key 屬性值
九、列表位移過渡
transition-group標簽添加v-move屬性定義元素位置改變時使用的動畫，同進入和離開動畫一樣，v會被替換成transition-group便簽的name屬性，也可以通過move-class自定義類來設置自定義位移時使用的類
當要設置離開時的位移過渡時需要設置絕對定位position:absolute
<!--filp-list為transition-group便簽的name屬性-->
.flip-list-move {
transition: transform 1s;
}
十、Lazy sudoku
通過tranistion-group標簽設置隨機數獨元素的切換，注意transition-group內的每個元素的v-bind:key需要綁定的和元素相關，不然只是簡單的數字替換，非元素的移動
CSS:
* {
box-sizing: border-box;
}
.box {
display: block;
margin: 0 auto;
width: 450px;
height: 450px;
}
.item {
display: inline-block;
width: 50px;
height: 50px;
line-height: 50px;
border: 1px solid #eee;
text-align: center;
color: #666;
}
.fade-move {
transition: all 0.4s linear;
}
HTML:
<div id="app">
<transition-group name="fade" class="box">
<span v-for="item in numArr" :key="item.id" class="item" :style="item.bg">{{ item.num }}</span>
</transition-group>
</div>
JavaScript
var app = new Vue({
el: '#app',
data: {
numArr: new Array(81).fill(1).map((value, index) => {
return {
num: (index % 9),
id: index,
bg:{
backgroundColor:'hsl(' + Math.floor(Math.random() * 360) + ',70% ,80%)'
}
}
}),
},
methods: {
shuffle: function () {
this.numArr.sort(function () {
return Math.random() - 0.5;
});
}
},
created: function () {
this.shuffle();
}
});
十一、可復用的過渡
將transition或者transition-group標簽作為組件的根標簽即可實現可復用的過渡