本文基于vue官方文檔，分別為：動態(tài)組件 & 異步組件、插槽兔沃、進入/離開 & 列表過渡 章節(jié)鏈接描述
要想實現tab動畫，首先要了解vue中哪些元素/那些組件適合在那些條件下實現動畫效果
條件渲染 (使用 v-if)
條件展示 (使用 v-show)
動態(tài)組件
組件根節(jié)點
vue官方文檔中有這樣一個例子
<div id="demo">
<button v-on:click="show = !show">
Toggle
</button>
<transition name="fade"><!--用transition包裹要添加動畫的元素/組件-->
<p v-if="show">hello</p>
</transition>
</div>
當你在transition上添加指定的name后啃沪，vue在進入/離開的過渡中粘拾，會有 6 個 class 切換，分別為：
name-enter创千、name-enter-active缰雇、name-enter-to入偷、name-leave、name-leave-active械哟、name-leave-to
如圖所示：
v-enter：定義進入過渡的開始狀態(tài)疏之。在元素被插入之前生效，在元素被插入之后的下一幀移除暇咆。
v-enter-active：定義進入過渡生效時的狀態(tài)锋爪。在整個進入過渡的階段中應用，在元素被插入之前生效爸业，在過渡/動畫完成之后移除其骄。這個類可以被用來定義進入過渡的過程時間，延遲和曲線函數扯旷。
v-enter-to: 2.1.8版及以上 定義進入過渡的結束狀態(tài)拯爽。在元素被插入之后下一幀生效 (與此同時 v-enter
被移除)，在過渡/動畫完成之后移除钧忽。
v-leave: 定義離開過渡的開始狀態(tài)毯炮。在離開過渡被觸發(fā)時立刻生效，下一幀被移除耸黑。
v-leave-active：定義離開過渡生效時的狀態(tài)桃煎。在整個離開過渡的階段中應用，在離開過渡被觸發(fā)時立刻生效大刊，在過渡/動畫完成之后移除为迈。這個類可以被用來定義離開過渡的過程時間，延遲和曲線函數奈揍。
v-leave-to: 2.1.8版及以上 定義離開過渡的結束狀態(tài)曲尸。在離開過渡被觸發(fā)之后下一幀生效 (與此同時 v-leave
被刪除)，在過渡/動畫完成之后移除男翰。
所以我們要想實現tab切換動畫另患，只需要在transition中添加我們每個單獨tab頁的子組件
1.用ul（無序列表）創(chuàng)建tab上方導航
<!-- 標題導航 -->
<ul class="tabNav">
<li v-for="(item, index) in tabs" :class="{'active' : tabIndex === index}" @click="changeTab(index)">{{item.desc}}</li>
</ul>
data中的定義
data () {
return {
currentTabComponent: 'tab1',
// tab頁默認顯示第一項
tabIndex: 0,
transitionName: ''
// tab根據既定格式定義
tabs: [
{
id: 'tab1',
desc: '首頁'
},
{
id: 'tab2',
desc: '聯(lián)系我們'
},
{
id: 'tab3',
desc: '與我相關'
}
]
}
}
設置li橫向排布，我創(chuàng)建的時候是把每個導航名稱放在data里蛾绎，用v-for做循環(huán)
2.具體設置每個tab頁
```
<div class="content">
<keep-alive>
<transition :name="transitionName">
<component v-bind:is="currentTabComponent"></component>
</transition>
</keep-alive>
</div>
組件功能是vue項目的一大特色昆箕。組件可以擴展html元素，可以封裝可重用的代碼租冠。我們用is特性來擴展鹏倘，從而達到可以在這些受限制的html元素中使用。is會將currentTabComponent的值轉換成指定的組件形式：
如果currentTabComponent為my-component
轉化后為：
在tab導航點擊時修改tabIndex顽爹，此時監(jiān)聽tabIndex的變化纤泵，當目的值>原始值，向右滑動镜粤，反之向左滑動
***```***
tabIndex (to, from) {
let that = this;
that.transitionName = (to > from) ? 'forward' : 'backward';
}
設置vue動畫六個狀態(tài)的class的效果捏题，此項目中因為存在兩種滑動狀態(tài)玻褪，所以有12個class
.forward-enter-active,.forward-leave-active{
transition: 0.5s all ease;
transform: translateX(0);
}
.forward-enter{
transform: translateX(100%);
}
.forward-enter-to{
transform: translateX(0);
}
.forward-leave {
transform: translate3d(0, 0, 0);
}
.forward-leave-to {
transform: translate3d(-100%, 0, 0);
}
.backward-enter-active, .backward-leave-active {
transition: all 0.5s;
}
.backward-leave {
transform: translate3d(0, 0, 0);
}
.backward-leave-to {
transform: translate3d(100%, 0, 0);
}
.backward-enter {
transform: translate3d(-100%, 0, 0);
}
.backward-enter-to {
transform: translate3d(0, 0, 0);
}
遇到問題：
在兩個tab頁相互切換時，當前div沒被移走公荧，將會導致下一個將會一直存在于當前div消失才一上來带射，所以我用了position：absolute，使每個div都飄在上面循狰，但是遇到的問題是最外層的盒子不能隨內層單個tab頁高度變化窟社，所以我用了js動態(tài)把tab頁高度賦值給外層div，目前還沒想到更好的方案绪钥。
最后我封裝了一下組件灿里，使用時只需要傳入tab的標題數組和單獨的tab頁即可使用
??：github地址可查看代碼github
