快捷導(dǎo)航

Vue中的基礎(chǔ)過(guò)渡動(dòng)畫及實(shí)現(xiàn)原理解析

更新時(shí)間：2018年12月04日 15:20:43 作者：皮蛋和豆樹(shù)

這篇文章主要介紹了Vue中的基礎(chǔ)過(guò)渡動(dòng)畫原理解析,需要的朋友可以參考下

前言

在日常開(kāi)發(fā)中動(dòng)畫是必不可少的一部分不僅能讓元素直接的切換顯得更加自然同時(shí)也能極大的增強(qiáng)用戶體驗(yàn) 因此在Vue之中也提供了非常強(qiáng)大的關(guān)于動(dòng)畫這方面的支持 Vue不僅支持用CSS來(lái)寫一些過(guò)渡效果同時(shí)也是支持JS的不過(guò)在這個(gè)文章中講述的都是如何利用CSS來(lái)實(shí)現(xiàn)過(guò)渡動(dòng)畫、keyframes動(dòng)畫以及實(shí)現(xiàn)的原理

過(guò)渡動(dòng)畫實(shí)現(xiàn)的原理

1.首先最基礎(chǔ)的一點(diǎn)在于如果你想要在單元素/單個(gè)組件之中實(shí)現(xiàn)過(guò)渡動(dòng)畫那么你需要在元素/組件所在的HTML標(biāo)簽之外包裹一層 <transition>標(biāo)簽

2.當(dāng)元素/組件被<transition>標(biāo)簽包裹了以后那么Vue會(huì)自動(dòng)的為我們構(gòu)建一個(gè)動(dòng)畫流程具體的流程會(huì)在下文提到因此先記住這句話就行啦也就是說(shuō) 如果你在<style>標(biāo)簽中添加了一些樣式的話Vue會(huì)自動(dòng)的在某個(gè)時(shí)間節(jié)點(diǎn)給元素或者組件添加、刪除對(duì)應(yīng)的樣式

3.上面提到了當(dāng)元素/組件被<transition>標(biāo)簽包裹的時(shí)候Vue會(huì)自動(dòng)的構(gòu)建動(dòng)畫流程也就是自動(dòng)的在某個(gè)時(shí)間節(jié)點(diǎn)添加/刪除對(duì)應(yīng)的CSS類名 Vue其實(shí)提供了6個(gè)對(duì)應(yīng)的類名這里借助官網(wǎng)的一張圖來(lái)羅列

光這樣看官網(wǎng)文字的解釋可能感覺(jué)還不夠清楚所以這里我們借助一張圖來(lái)幫助我們更好的理解這些CSS類名分別在什么時(shí)候被添加、移除

4 各個(gè)類名添加刪除的時(shí)間

4.1

我們假設(shè)黑色橫線作為動(dòng)畫的整個(gè)流程紅點(diǎn)為動(dòng)畫開(kāi)始的瞬間那么當(dāng)我們用 <transition>標(biāo)簽包裹了元素/組件的時(shí)候 Vue會(huì)在動(dòng)畫即將開(kāi)始還沒(méi)開(kāi)始的時(shí)候添加兩個(gè)CSS類名分別是v-enter/v-enter-to當(dāng)動(dòng)畫開(kāi)始的瞬間v-enter被自動(dòng)的移除而v-enter-active這個(gè)class會(huì)一直存在于整個(gè)動(dòng)畫過(guò)程中直到動(dòng)畫結(jié)束的時(shí)候跟v-enter/v-enter-to一起被自動(dòng)刪除

4.2

我們同樣還是假設(shè)黑色橫線作為動(dòng)畫的整個(gè)流程那么在這里可以看到v-leave會(huì)在動(dòng)畫還沒(méi)有開(kāi)始的時(shí)候被添加上去當(dāng)動(dòng)畫開(kāi)始的瞬間v-leave被移除 v-leave-to被添加而v-leave-active會(huì)一直存在于整個(gè)動(dòng)畫過(guò)程中直到動(dòng)畫結(jié)束的時(shí)候跟v-leave/v-leave-to一起被移除

###Coding

當(dāng)有了這些理論知識(shí)以后就可以動(dòng)手寫一個(gè)非常簡(jiǎn)單的demo了假設(shè)現(xiàn)在有一個(gè)需求頁(yè)面上某個(gè)元素通過(guò)按鈕來(lái)控制隱藏和顯示同時(shí)這個(gè)隱藏和顯示的過(guò)程中有一個(gè)透明度由0-1的漸變過(guò)程

思路

通過(guò)v-if控制元素的顯示同時(shí)利用<transition>標(biāo)簽包裹元素實(shí)現(xiàn)透明度變化的過(guò)渡過(guò)程

1.先搭建基本頁(yè)面以及通過(guò)按鈕點(diǎn)擊事件控制元素的隱藏與顯示

2.既然已知vue會(huì)在元素被<transition>包裹以后自動(dòng)添加類名那就在<style>標(biāo)簽里寫上對(duì)應(yīng)的樣式效果

<style>
 .v-enter,
 .v-leave-to {
  opacity: 0;
 }
 .v-enter-active,
 .v-leave-active {
  transition: opacity 3s;
 }
 </style>

這里需要理解的一點(diǎn)在于上文已經(jīng)提到當(dāng)進(jìn)場(chǎng)動(dòng)畫觸發(fā)的時(shí)候 v-enter會(huì)立馬被移除因此在樣式里把opacity寫成0 也就是說(shuō) 原本頁(yè)面上沒(méi)有顯示但是即將要顯示這個(gè)元素的時(shí)候 opacity會(huì)變?yōu)? 而v-enter-active全程都在監(jiān)聽(tīng)transition:opacity的變化如果變化了就讓效果在3秒內(nèi)結(jié)束反之退場(chǎng)動(dòng)畫也是同樣的 v-leave-to會(huì)在動(dòng)畫執(zhí)行的時(shí)候被添加這個(gè)時(shí)候 v-leave-active感知到了transition:opacity的變化會(huì)在3秒內(nèi)做出對(duì)應(yīng)的改變最終代碼運(yùn)行結(jié)果如下

總結(jié)

以上所述是小編給大家介紹的Vue中的基礎(chǔ)過(guò)渡動(dòng)畫及實(shí)現(xiàn)原理解析，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: