資訊專欄INFORMATION COLUMN
摘要：在元素被插入之前生效，在元素被插入之后的下一幀移除。定義進(jìn)入過渡生效時的狀態(tài)。這個類可以被用來定義進(jìn)入過渡的過程時間，延遲和曲線函數(shù)。我們用特性來擴(kuò)展，從而達(dá)到可以在這些受限制的元素中使用。
本文基于vue官方文檔，分別為：動態(tài)組件 & 異步組件、插槽、進(jìn)入/離開 & 列表過渡 章節(jié)鏈接描述
要想實現(xiàn)tab動畫，首先要了解vue中哪些元素/那些組件適合在那些條件下實現(xiàn)動畫效果
條件渲染 (使用 v-if)
條件展示 (使用 v-show)
動態(tài)組件
組件根節(jié)點
vue官方文檔中有這樣一個例子
hello
當(dāng)你在transition上添加指定的name后，vue在進(jìn)入/離開的過渡中，會有 6 個 class 切換，分別為：
name-enter、name-enter-active、name-enter-to、name-leave、name-leave-active、name-leave-to
如圖所示：
v-enter：定義進(jìn)入過渡的開始狀態(tài)。在元素被插入之前生效，在元素被插入之后的下一幀移除。v-enter-active：定義進(jìn)入過渡生效時的狀態(tài)。在整個進(jìn)入過渡的階段中應(yīng)用，在元素被插入之前生效，在過渡/動畫完成之后移除。這個類可以被用來定義進(jìn)入過渡的過程時間，延遲和曲線函數(shù)。
v-enter-to: 2.1.8版及以上 定義進(jìn)入過渡的結(jié)束狀態(tài)。在元素被插入之后下一幀生效 (與此同時 v-enter
被移除)，在過渡/動畫完成之后移除。v-leave: 定義離開過渡的開始狀態(tài)。在離開過渡被觸發(fā)時立刻生效，下一幀被移除。
v-leave-active：定義離開過渡生效時的狀態(tài)。在整個離開過渡的階段中應(yīng)用，在離開過渡被觸發(fā)時立刻生效，在過渡/動畫完成之后移除。這個類可以被用來定義離開過渡的過程時間，延遲和曲線函數(shù)。
v-leave-to: 2.1.8版及以上 定義離開過渡的結(jié)束狀態(tài)。在離開過渡被觸發(fā)之后下一幀生效 (與此同時 v-leave
被刪除)，在過渡/動畫完成之后移除。
所以我們要想實現(xiàn)tab切換動畫，只需要在transition中添加我們每個多帶帶tab頁的子組件
1.用ul（無序列表）創(chuàng)建tab上方導(dǎo)航
data中的定義
data () {
return {
currentTabComponent: "tab1",
// tab頁默認(rèn)顯示第一項
tabIndex: 0,
transitionName: ""
// tab根據(jù)既定格式定義
tabs: [
{
id: "tab1",
desc: "首頁"
},
{
id: "tab2",
desc: "聯(lián)系我們"
},
{
id: "tab3",
desc: "與我相關(guān)"
}
]
}
},
設(shè)置li橫向排布，我創(chuàng)建的時候是把每個導(dǎo)航名稱放在data里，用v-for做循環(huán)
2.具體設(shè)置每個tab頁
組件功能是vue項目的一大特色。組件可以擴(kuò)展html元素，可以封裝可重用的代碼。我們用is特性來擴(kuò)展，從而達(dá)到可以在這些受限制的html元素中使用。is會將currentTabComponent的值轉(zhuǎn)換成指定的組件形式：
如果currentTabComponent為my-component
轉(zhuǎn)化后為：
在tab導(dǎo)航點擊時修改tabIndex，此時監(jiān)聽tabIndex的變化，當(dāng)目的值>原始值，向右滑動，反之向左滑動
tabIndex (to, from) {
let that = this;
that.transitionName = (to > from) ? "forward" : "backward";
}
設(shè)置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頁相互切換時，當(dāng)前div沒被移走，將會導(dǎo)致下一個將會一直存在于當(dāng)前div消失才一上來，所以我用了position：absolute，使每個div都飄在上面，但是遇到的問題是最外層的盒子不能隨內(nèi)層單個tab頁高度變化，所以我用了js動態(tài)把tab頁高度賦值給外層div，目前還沒想到更好的方案。
最后我封裝了一下組件，使用時只需要傳入tab的標(biāo)題數(shù)組和多帶帶的tab頁即可使用
??：github地址可查看代碼github
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/53408.html
摘要：在元素被插入之前生效，在元素被插入之后的下一幀移除。定義進(jìn)入過渡生效時的狀態(tài)。這個類可以被用來定義進(jìn)入過渡的過程時間，延遲和曲線函數(shù)。我們用特性來擴(kuò)展，從而達(dá)到可以在這些受限制的元素中使用。 本文基于vue官方文檔，分別為：動態(tài)組件 & 異步組件、插槽、進(jìn)入/離開 & 列表過渡 章節(jié)鏈接描述 要想實現(xiàn)tab動畫，首先要了解vue中哪些元素/那些組件適合在那些條件下實現(xiàn)動畫效果 條件渲...
摘要：在元素被插入之前生效，在元素被插入之后的下一幀移除。定義進(jìn)入過渡生效時的狀態(tài)。這個類可以被用來定義進(jìn)入過渡的過程時間，延遲和曲線函數(shù)。我們用特性來擴(kuò)展，從而達(dá)到可以在這些受限制的元素中使用。 本文基于vue官方文檔，分別為：動態(tài)組件 & 異步組件、插槽、進(jìn)入/離開 & 列表過渡 章節(jié)鏈接描述 要想實現(xiàn)tab動畫，首先要了解vue中哪些元素/那些組件適合在那些條件下實現(xiàn)動畫效果 條件渲...
摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。 蘇...
摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。 蘇...
閱讀 3679·2021-11-24 09:38
閱讀 3159·2021-11-15 11:37
閱讀 800·2021-11-12 10:36
閱讀 3557·2021-10-21 09:38
閱讀 3230·2021-09-28 09:36
閱讀 2430·2021-09-22 16:01
閱讀 5005·2021-09-22 15:09
閱讀 1230·2019-08-30 15:55
