您好,登錄后才能下訂單哦!
本篇文章給大家分享的是有關(guān)怎么在Vue中實(shí)現(xiàn)過渡動(dòng)畫,小編覺得挺實(shí)用的,因此分享給大家學(xué)習(xí),希望大家閱讀完這篇文章后可以有所收獲,話不多說,跟著小編一起來看看吧。
過渡動(dòng)畫實(shí)現(xiàn)的原理
1.首先最基礎(chǔ)的一點(diǎn)在于 如果你想要在單元素/單個(gè)組件之中實(shí)現(xiàn)過渡動(dòng)畫 那么 你需要在元素/組件所在的HTML標(biāo)簽之外包裹一層 <transition>標(biāo)簽
2.當(dāng)元素/組件被<transition>標(biāo)簽包裹了以后 那么Vue會(huì)自動(dòng)的為我們構(gòu)建一個(gè)動(dòng)畫流程 具體的流程會(huì)在下文提到 因此先記住這句話就行啦 也就是說 如果你在<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)的一張圖來羅列
光這樣看官網(wǎng)文字的解釋可能感覺還不夠清楚 所以這里我們借助一張圖來幫助我們更好的理解這些CSS類名分別在什么時(shí)候被添加、移除
4 各個(gè)類名添加刪除的時(shí)間
4.1
我們假設(shè)黑色橫線作為動(dòng)畫的整個(gè)流程 紅點(diǎn)為動(dòng)畫開始的瞬間 那么 當(dāng)我們用 <transition>標(biāo)簽包裹了元素/組件的時(shí)候 Vue會(huì)在動(dòng)畫即將開始還沒開始的時(shí)候添加兩個(gè)CSS類名 分別是v-enter/v-enter-to當(dāng)動(dòng)畫開始的瞬間v-enter被自動(dòng)的移除 而v-enter-active這個(gè)class會(huì)一直存在于整個(gè)動(dòng)畫過程中 直到動(dòng)畫結(jié)束的時(shí)候跟v-enter/v-enter-to一起被自動(dòng)刪除
4.2
我們同樣還是假設(shè)黑色橫線作為動(dòng)畫的整個(gè)流程 那么在這里可以看到v-leave會(huì)在動(dòng)畫還沒有開始的時(shí)候被添加上去 當(dāng)動(dòng)畫開始的瞬間v-leave被移除 v-leave-to被添加 而v-leave-active會(huì)一直存在于整個(gè)動(dòng)畫過程中 直到動(dòng)畫結(jié)束的時(shí)候跟v-leave/v-leave-to一起被移除
###Coding
當(dāng)有了這些理論知識(shí)以后 就可以動(dòng)手寫一個(gè)非常簡(jiǎn)單的demo了 假設(shè)現(xiàn)在有一個(gè)需求 頁面上某個(gè)元素 通過按鈕來控制隱藏和顯示 同時(shí)這個(gè)隱藏和顯示的過程中 有一個(gè)透明度由0-1的漸變過程
思路
通過v-if控制元素的顯示 同時(shí)利用<transition>
標(biāo)簽包裹元素實(shí)現(xiàn)透明度變化的過渡過程
1.先搭建基本頁面以及通過按鈕點(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 也就是說 原本頁面上沒有顯示但是即將要顯示這個(gè)元素的時(shí)候 opacity會(huì)變?yōu)? 而v-enter-active全程都在監(jiān)聽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é)果如下
以上就是怎么在Vue中實(shí)現(xiàn)過渡動(dòng)畫,小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘9ぷ鲿?huì)見到或用到的。希望你能通過這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。