hide show vue 动画_Vue2.x学习四：过渡动画
Vue 在插入、更新或者移除 DOM 時(shí)，提供多種不同方式的應(yīng)用過(guò)渡效果。
請(qǐng)注意它的應(yīng)用場(chǎng)景
并不是說(shuō)我們寫(xiě)了一個(gè)動(dòng)畫(huà)之后讓它一直在動(dòng)，而是在一個(gè)模塊顯示或隱藏的時(shí)候去做一種特效，使得它的過(guò)程有過(guò)渡性，而不是很突兀的直接消失或顯示。
它適用的場(chǎng)景是v-if和v-show，動(dòng)態(tài)組件，組件根節(jié)點(diǎn)。
具體實(shí)現(xiàn)有以下幾種方式：
1)在 CSS 過(guò)渡和動(dòng)畫(huà)中自動(dòng)應(yīng)用 class
2)可以配合使用第三方 CSS 動(dòng)畫(huà)庫(kù)，如 Animate.css
3)在過(guò)渡鉤子函數(shù)中使用 JavaScript 直接操作 DOM
4)可以配合使用第三方 JavaScript 動(dòng)畫(huà)庫(kù)，如 Velocity.js
下面我們通過(guò)一個(gè)例子來(lái)學(xué)習(xí)：
顯示
隱藏
{{msg}}
new Vue({
el:'.container',
data:{
msg:'hello',
//定義它是否顯示，默認(rèn)情況下為false隱藏
isShow:false,
},
//在其中定義顯示與隱藏兩個(gè)方法
methods:{
// 要想動(dòng)態(tài)的實(shí)現(xiàn)顯示與隱藏，我們只要?jiǎng)討B(tài)的改變isShow的狀態(tài)
show(){
this.isShow=true;//當(dāng)isShow為真，顯示
},
hide(){
this.isShow=false;//當(dāng)isShow為假，隱藏
}
}
});
它還有一種簡(jiǎn)便寫(xiě)法
切換
{{msg}}
new Vue({
el:'.container',
data:{
msg:'hello',
isShow:false,
}
});
我們可以看到，上面顯示與隱藏的方式過(guò)于直接，此時(shí)我們可以為它創(chuàng)建動(dòng)畫(huà)效果。
css過(guò)渡
隱藏與顯示的效果實(shí)現(xiàn)之后，我們來(lái)創(chuàng)建動(dòng)畫(huà)。
哪個(gè)部分要?jiǎng)討B(tài)的顯示與隱藏，我們給哪個(gè)部分加。
然后我們?yōu)樗犹匦А?/p>
加特效之前我們要知道，元素從開(kāi)始顯示到完全顯示，開(kāi)始隱藏到完全隱藏也要經(jīng)歷一些階段，我們可以在這之中加入一些樣式，就能達(dá)到一些效果。
我們可以通過(guò)一張圖來(lái)說(shuō)明：
v-enter：定義進(jìn)入過(guò)渡的開(kāi)始狀態(tài)。在元素被插入之前生效，在元素被插入之后的下一幀移除。
v-enter-active：定義進(jìn)入過(guò)渡生效時(shí)的狀態(tài)。在整個(gè)進(jìn)入過(guò)渡的階段中應(yīng)用，在元素被插入之前生效，在過(guò)渡/動(dòng)畫(huà)完成之后移除。這個(gè)類(lèi)可以被用來(lái)定義進(jìn)入過(guò)渡的過(guò)程時(shí)間，延遲和曲線函數(shù)。
v-enter-to: 定義進(jìn)入過(guò)渡的結(jié)束狀態(tài)。在元素被插入之后下一幀生效 (與此同時(shí) v-enter 被移除)，在過(guò)渡/動(dòng)畫(huà)完成之后移除。
v-leave: 定義離開(kāi)過(guò)渡的開(kāi)始狀態(tài)。在離開(kāi)過(guò)渡被觸發(fā)時(shí)立刻生效，下一幀被移除。
v-leave-active：定義離開(kāi)過(guò)渡生效時(shí)的狀態(tài)。在整個(gè)離開(kāi)過(guò)渡的階段中應(yīng)用，在離開(kāi)過(guò)渡被觸發(fā)時(shí)立刻生效，在過(guò)渡/動(dòng)畫(huà)完成之后移除。這個(gè)類(lèi)可以被用來(lái)定義離開(kāi)過(guò)渡的過(guò)程時(shí)間，延遲和曲線函數(shù)。
v-leave-to: 定義離開(kāi)過(guò)渡的結(jié)束狀態(tài)。在離開(kāi)過(guò)渡被觸發(fā)之后下一幀生效 (與此同時(shí) v-leave 被刪除)，在過(guò)渡/動(dòng)畫(huà)完成之后移除。
animate/*開(kāi)始顯示*/
.v-enter{ opacity: 0; }
/*顯示過(guò)程*/
.v-enter-active{ transition: opacity 1.5s;/*給transition加過(guò)渡特效(屬性),持續(xù)時(shí)間為1.5秒*/ }
/*顯示完畢*/
.v-enter-to{ opacity: 1; }
/*開(kāi)始隱藏*/
.v-leave{ opacity: 1; }
/*隱藏過(guò)程*/
.v-leave-active{ transition: opacity 1.5s; }
/*隱藏完畢*/
.v-leave-to{ opacity: 0; }
切換
{{msg}}
new Vue({
el:'.container',
data:{
msg:'hello',
isShow:false,
}
});
css動(dòng)畫(huà)
相當(dāng)于將css中的動(dòng)畫(huà)機(jī)制運(yùn)用到vue中
animate/*只在顯示與隱藏的過(guò)程中定義動(dòng)畫(huà),實(shí)現(xiàn)過(guò)渡效果*/
.v-enter-active {
animation-name: app;/*指定動(dòng)畫(huà)名稱(chēng)*/
animation-duration: 3s;/*定義時(shí)間*/
}
.v-leave-active {
animation-name: app;
animation-duration: 3s;
animation-direction: reverse;/*動(dòng)畫(huà)反向播放*/
}
/*定義動(dòng)畫(huà)效果*/
@keyframes app {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100%{
transform: scale(1);
}
}
切換
{{msg}}
new Vue({
el:'.container',
data:{
msg:'hello',
isShow:false,
}
});
我們有的時(shí)候可能不太能寫(xiě)好keyframes，這個(gè)時(shí)候我們可以引用別人封裝好的動(dòng)畫(huà)庫(kù)，那么我們自己就不用寫(xiě)keyframes了。
下面我們來(lái)看看如何在vue中引入animate.css動(dòng)畫(huà)庫(kù)。
css動(dòng)畫(huà)庫(kù)
上面兩種方式，我們只是為特效元素添加transition標(biāo)簽包裹，
而這種動(dòng)畫(huà)庫(kù)的實(shí)現(xiàn)方式，我們需要為transition標(biāo)簽添加屬性
vue中為我們提供了6個(gè)標(biāo)簽：
enter-class、enter-active-class、enter-to-class
leave-class、leave-active-class、leave-to-class
他們的優(yōu)先級(jí)高于普通的類(lèi)名，這對(duì)于 Vue 的過(guò)渡系統(tǒng)和其他第三方 CSS 動(dòng)畫(huà)庫(kù)，如 Animate.css 結(jié)合使用十分有用。
animate切換
{{msg}}
new Vue({
el:'.container',
data:{
msg:'hello',
isShow:false,
}
});
js動(dòng)畫(huà)庫(kù)
這里我們用到了JavaScript 鉤子。
它有以下幾種鉤子：
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"
>
要顯示的內(nèi)容用法是在transition綁定函數(shù)，并在methods中定義
methods: {
// 進(jìn)入
beforeEnter: function (el) {
// ...
},
// 此回調(diào)函數(shù)是可選項(xiàng)的設(shè)置
// 與 CSS 結(jié)合時(shí)使用
enter: function (el, done) {
// ...
done()
},
afterEnter: function (el) {
// ...
},
enterCancelled: function (el) {
// ...
},
// 離開(kāi)
beforeLeave: function (el) {
// ...
},
// 此回調(diào)函數(shù)是可選項(xiàng)的設(shè)置
// 與 CSS 結(jié)合時(shí)使用
leave: function (el, done) {
// ...
done()
},
afterLeave: function (el) {
// ...
},
// leaveCancelled 只用于 v-show 中
leaveCancelled: function (el) {
// ...
}
}
實(shí)現(xiàn)動(dòng)畫(huà)的方式有2種，一種是jquery，一種是velocity。
此處我們以velocity為例
animate切換
{{msg}}
new Vue({
el:'.container',
data:{
msg:'hello',
isShow:false,
},
methods:{
// 事件由vue來(lái)調(diào)用,它會(huì)給我們傳兩個(gè)參數(shù):el(當(dāng)前元素),done(函數(shù)執(zhí)行完之后的回調(diào))
enter(el,done){
//console.log(el);//[object HTMLDivElement]
//console.log(done);//function () {...}
/*
Velocity(要控制的元素,{動(dòng)畫(huà)樣式},{動(dòng)畫(huà)配置})
動(dòng)畫(huà)樣式,可以在http://www.mrfront.com/docs/velocity.js/plugins.html內(nèi)置特效中尋找
*/
Velocity(el,"transition.fadeIn",{
// 動(dòng)畫(huà)配置項(xiàng)
duration:1000, //動(dòng)畫(huà)執(zhí)行時(shí)間(單位毫秒)
complete:done // 動(dòng)畫(huà)結(jié)束時(shí)的回調(diào)函數(shù),必須要寫(xiě)
/*其他參數(shù)
easing: "swing", // 緩動(dòng)效果
queue: "", // 隊(duì)列
begin: undefined, // 動(dòng)畫(huà)開(kāi)始時(shí)的回調(diào)函數(shù)
progress: undefined, // 動(dòng)畫(huà)執(zhí)行中的回調(diào)函數(shù)(該函數(shù)會(huì)隨著動(dòng)畫(huà)執(zhí)行被不斷觸發(fā))
display: undefined, // 動(dòng)畫(huà)結(jié)束時(shí)設(shè)置元素的 css display 屬性
visibility: undefined, // 動(dòng)畫(huà)結(jié)束時(shí)設(shè)置元素的 css visibility 屬性
loop: false, // 循環(huán)
delay: false, // 延遲
mobileHA: true // 移動(dòng)端硬件加速(默認(rèn)開(kāi)啟)
*/
});
}
}
});
總結(jié)
以上是生活随笔為你收集整理的hide show vue 动画_Vue2.x学习四：过渡动画的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： git ssh创建分支_【ssh简单版g
- 下一篇： @async 没有异步_扒一扒VueCL