怎么在Vue中實現(xiàn)過渡動畫-創(chuàng)新互聯(lián)

本篇文章給大家分享的是有關(guān)怎么在Vue中實現(xiàn)過渡動畫，小編覺得挺實用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

我們提供的服務(wù)有：成都網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、鎮(zhèn)坪ssl等。為近1000家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的鎮(zhèn)坪網(wǎng)站制作公司

過渡動畫實現(xiàn)的原理

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

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

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

 

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

4 各個類名添加刪除的時間

4.1

 

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

4.2

 

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

###Coding

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

思路

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

1.先搭建基本頁面以及通過按鈕點擊事件控制元素的隱藏與顯示

 

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

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

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

以上就是怎么在Vue中實現(xiàn)過渡動畫，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降摹ＯＭ隳芡ㄟ^這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)站題目：怎么在Vue中實現(xiàn)過渡動畫-創(chuàng)新互聯(lián)
本文鏈接：http://bm7419.com/article36/didipg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、網(wǎng)站排名、企業(yè)網(wǎng)站制作、云服務(wù)器、自適應(yīng)網(wǎng)站、域名注冊

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)