vue巧用過渡效果的示例分析
這篇文章主要介紹vue巧用過渡效果的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)建站！專注于網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、微信小程序定制開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了平桂免費(fèi)建站歡迎大家使用！
vue提供的了transition組件來實(shí)現(xiàn)組件的過渡和路由的過渡，合理使用這個(gè)組建可以讓我們的頁面更加的靈活，提高用戶體驗(yàn)。
概念
在進(jìn)入/離開的過渡中， 會(huì)有6個(gè)class的切換， 抄一張官方的圖
v-enter：定義進(jìn)入過渡的開始狀態(tài)。在元素被插入之前生效，在元素被插入之后的下一幀移除。
v-enter-active：定義進(jìn)入過渡生效時(shí)的狀態(tài)。在整個(gè)進(jìn)入過渡的階段中應(yīng)用，在元素被插入之前生效，在過渡/動(dòng)畫完成之后移除。這個(gè)類可以被用來定義進(jìn)入過渡的過程時(shí)間，延遲和曲線函數(shù)。
v-enter-to: 2.1.8版及以上 定義進(jìn)入過渡的結(jié)束狀態(tài)。在元素被插入之后下一幀生效 (與此同時(shí) v-enter 被移除)，在過渡/動(dòng)畫完成之后移除。
v-leave: 定義離開過渡的開始狀態(tài)。在離開過渡被觸發(fā)時(shí)立刻生效，下一幀被移除。
v-leave-active：定義離開過渡生效時(shí)的狀態(tài)。在整個(gè)離開過渡的階段中應(yīng)用，在離開過渡被觸發(fā)時(shí)立刻生效，在過渡/動(dòng)畫完成之后移除。這個(gè)類可以被用來定義離開過渡的過程時(shí)間，延遲和曲線函數(shù)。
v-leave-to: 2.1.8版及以上 定義離開過渡的結(jié)束狀態(tài)。在離開過渡被觸發(fā)之后下一幀生效 (與此同時(shí) v-leave 被刪除)，在過渡/動(dòng)畫完成之后移除。
看起來還是有有點(diǎn)亂，先來捋一下。
enter 定義開始的狀態(tài)， active定義過程， enter定義結(jié)束， 但是在實(shí)際進(jìn)行的時(shí)候是有交叉的。 通過斷點(diǎn)可以發(fā)現(xiàn)，
// transition: all 2s;
.move-enter {
margin-left: 0;
}
.move-enter-active {
margin-left: 100px;
}
.move-enter-to {
margin-left: 200px;
}例如在上面這種情況下， 過渡動(dòng)畫會(huì)怎么進(jìn)行呢？
這里要注意兩點(diǎn)。
enter-active覆蓋掉了enter的起點(diǎn)位置
一共經(jīng)過了兩次過渡， enter-to是在active結(jié)束之后開始的， 所以第四秒， 才回到dom元素本身的位置。
所以官方文檔之， 也是使用v-enter定義起點(diǎn)位置， 在enter-active中控制效果。
利用class實(shí)現(xiàn)過渡效果
在這6個(gè)class之上， 利用transition或者動(dòng)畫， 都可以實(shí)現(xiàn)我們需要的效果。 舉個(gè)栗子， 這里我們直接將所有的路由改變都定義一個(gè)過渡效果，
appear屬性表示頁面初次加載的時(shí)候也適用于動(dòng)畫
@keyframes animationIn {
0% {
transform: translate(-100%, 0);
}
100% {
transform: translate(0, 0);
}
}
@keyframes animationOut {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(100%, 0);
}
}
.move-enter {
transform: translate(-100%, 0);
position: absolute!important;
z-index: 999;
top: 0;
left: 0;
width: 100%;
}
.move-enter-active {
animation: animationIn 0.2s;
position: absolute!important; // 進(jìn)入的組件要覆蓋掉移除的組件，參考 //https://cn.vuejs.org/v2/guide/transitions.html#%E8%BF%87%E6%B8%A1%E6%A8%A1%E5%BC%8F
z-index: 999;
top: 0;
left: 0;
width: 100%;
}
.move-leave {
transform: translate(0, 0);
}
.move-leave-active {
animation: animationOut 0.2s;
}效果
JavaScript 鉤子
這些鉤子函數(shù)可以結(jié)合 CSS transitions/animations 使用
在這些鉤子中， 可以使用其他第三方庫，回調(diào)中的el將是真實(shí)的dom元素 舉個(gè)栗子, 這里使用了官方推薦的Velocity.js作為動(dòng)畫庫
切換 methods: {
start() {
this.show = !this.show
},
handleBeforeEnter: function (el) {
el.style.opacity = 0;
console.log('方塊顯示動(dòng)畫即將執(zhí)行');
},
handleEnter: function (el, done) {
Velocity(el, 'stop');
Velocity(el, {
backgroundColor: '#0085eb',
opacity: 1,
translateX: 260,
rotateZ: ['360deg', 0]
}, {
duration: 1000,
easing: [ 0.4, 0.01, 0.165, 0.99 ],
complete: done
});
console.log('方塊顯示動(dòng)畫執(zhí)行中...');
},
handleAfterEnter: function (el) {
console.log('方塊顯示動(dòng)畫結(jié)束');
},
handleBeforeLeave: function (el) {
console.log('方塊隱藏動(dòng)畫即將執(zhí)行');
},
handleLeave: function (el, done) {
Velocity(el, 'stop');
Velocity(el, {
backgroundColor: '#4dd0e1',
opacity: 0,
translateX: 0,
rotateZ: [0, '360deg']
}, {
duration: 1000,
easing: [ 0.4, 0.01, 0.165, 0.99 ],
complete: done
});
console.log('方塊隱藏動(dòng)畫執(zhí)行中...');
},
handleAfterLeave: function (el) {
console.log('方塊隱藏動(dòng)畫結(jié)束');
}
}
列表過渡
vue還提供了transition-group組件， 作為列表過渡的容器
不同于 ，它會(huì)以一個(gè)真實(shí)元素呈現(xiàn)：默認(rèn)為一個(gè) 。你也可以通過 tag 特性更換為其他元素
transition-group 擁特別的v-move屬性，它會(huì)在元素的改變定位的過程中應(yīng)用， 效果可參見官網(wǎng)。
其他的就不抄官網(wǎng)了
列表過渡中， 可以結(jié)合js鉤子， 實(shí)現(xiàn)一些特殊的效果
舉個(gè)栗子
排序
重慶分公司
重慶分公司
