Vue.js 3.x前端開發(fā)技術與實戰(zhàn) 課件 第6章Vue.js過渡與動畫

第6章-Vue.js過渡與動畫(4學時)教學目標1.熟悉過渡類名的含義和命名規(guī)范。2.掌握單元素/單組件的過渡方法。3.掌握初始渲染過渡的方法。4.掌握列表進入/離開、排序和交錯過渡的實現(xiàn)方法。5.學會編寫帶有Vue.js過渡和動畫效果的頁面。16.1單元素/組件的過渡Vue在插入、更新或者移除DOM時，提供多種不同方式的應用過渡效果。包括以下工具：（1）在CSS過渡和動畫中自動應用class。（2）可以配合使用第三方CSS動畫庫，如Animate.css。（3）在過渡鉤子函數(shù)中使用JavaScript直接操作DOM。（4）可以配合使用第三方JavaScript動畫庫，如Velocity.js。Vue提供了內(nèi)置的過渡封裝組件，該組件用于包裹要實現(xiàn)過渡效果的組件。Vue提供了<transition>的封裝組件，可以給任何元素和組件添加進入/離開過渡。Vue的transiton標記的語法:<transition

name="slide-fade">

<div>

<p

v-if="flag"><img

src="image-6-1.jpg"></p>

</div>

</transition>

使用情形如下：（1）條件渲染（使用v-if）（2）條件展示（使用v-show)（3）動態(tài)組件（4）組件根節(jié)點【例6-1】單元素（圖像）過渡實戰(zhàn)6.1.1過渡的類名

在進入/離開的過渡中，會有6個class切換（v代表在沒有transitionname的時候調(diào)用）。（1）v-enter-from：定義進入過渡的開始狀態(tài)。在元素被插入之前生效，在元素被插入之后的下一幀移除。（2）v-enter-active：定義進入過渡生效時的狀態(tài)。在整個進入過渡的階段中應用，在元素被插入之前生效，在過渡/動畫完成之后移除。這個類可以被用來定義進入過渡的過程時間，延遲和曲線函數(shù)。（3）v-enter-to：定義進入過渡的結(jié)束狀態(tài)。在元素被插入之后下一幀生效(與此同時v-enter被移除)，在過渡/動畫完成之后移除。（4）v-leave-from：定義離開過渡的開始狀態(tài)。在離開過渡被觸發(fā)時立刻生效，下一幀被移除。（5）v-leave-active：定義離開過渡生效時的狀態(tài)。在整個離開過渡的階段中應用，在離開過渡被觸發(fā)時立刻生效，在過渡/動畫完成之后移除。這個類可以被用來定義離開過渡的過程時間，延遲和曲線函數(shù)。（6）v-leave-to：定義離開過渡的結(jié)束狀態(tài)。在離開過渡被觸發(fā)之后下一幀生效(與此同時v-leave被刪除)，在過渡/動畫完成之后移除。

對于這些在過渡中切換的類名來說，如果使用不帶name屬性的<transition>，則“v-”將作為這些類名的默認前綴。如果使用了<transitionname="my-transition"></transition>，那么v-enter會替換為my-transition-enter-from。v-enter-active和v-leave-active可以控制進入/離開過渡的不同的緩和曲線。

過渡屬性與不透明度的關系圖6.1.1過渡的類名6.1.2CSS過渡

常用的過渡都是使用CSS過渡，同時可以設置持續(xù)時間和動畫函數(shù)?！纠?-2】與【例6-1】有些類似，只是在使用CSS過渡時定義動畫函數(shù)。該案例使用兩個transition標記，一個帶有name屬性，一個不帶name屬性。帶name屬性的過渡標記適用類樣式以”slide-fade-”開開頭，不帶name屬性的過渡標記適用樣式以“v-”開頭。以下樣式同時定義了過渡時間函數(shù)：.slide-fade-leave-active{transition:all.8scubic-bezier(1.0,0.5,0.8,1.0);}【例6-2】CSS過渡實戰(zhàn)

所謂動畫就是讓一個元素從一個狀態(tài)逐漸向另一個狀態(tài)轉(zhuǎn)變的過程?？梢栽谶@個過程中改變元素的CSS屬性。動畫可以反復播放。CSS動畫（CSSAnimations）用法同CSS過渡，區(qū)別是在動畫中v-enter類名在節(jié)點插入DOM后不會立即刪除，而是在animationend事件觸發(fā)時刪除。6.1.3CSS動畫【例6-3】CSS動畫實戰(zhàn)。

第10行和第13行定義類名為“animation-enter-active（入場動畫的時間段）”和“.animation-leave-active（離場動畫的時間段）”的樣式，綁定動畫myAnimations，并設置延時和反轉(zhuǎn)效果。

第17～21行定義關鍵幀,指定動畫名稱為“myAnimations”，在其中定義3個過渡狀態(tài)，分別0%、50%、100%，并設置轉(zhuǎn)換效果（縮放一定的倍數(shù)）?！纠?-3】CSS動畫實戰(zhàn)6.1.4自定義過渡的類名

可以通過以下屬性（attribute）來自定義過渡類名：enter-from-classenter-active-classenter-to-classleave-from-classleave-active-classleave-to-class

它們的優(yōu)先級高于普通的類名，這對于Vue的過渡系統(tǒng)和其他第三方CSS動畫庫，例如animate.css（https://animate.style/）結(jié)合使用十分有用。

animate.css是一個來自國外的CSS3動畫庫，它預設了抖動（shake）、閃爍（flash）、翻轉(zhuǎn)（flip）、彈跳（bounce）、旋轉(zhuǎn)（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多達60多種動畫效果，幾乎包含了所有常見的動畫效果?！纠?-4】自定義過渡類名實戰(zhàn)

第10行定義了鏈接特定版本的外部樣式表文件“animate.css”。第23～25行給transition標記定義name屬性，值為“custom-classes-transition”。并給該標記添加自定義enter-active-class、leave-active-class屬性，其值分別為“animated

tada（晃動效果）”、“animated

bounceOutRight（動畫從右側(cè)彈跳）”6.1.5同時使用過渡和動畫Vue通過設置相應的事件監(jiān)聽器來了解過渡完成情況?？梢允莟ransitionend或animationend，這取決于給元素應用的CSS規(guī)則。如果使用其中任何一種，Vue能自動識別類型并設置監(jiān)聽。

但是，在一些場景中，可能需要給同一個元素同時設置兩種過渡動效，比如animation很快的被觸發(fā)并完成了，而transition效果還沒結(jié)束。在這種情況中，就需要使用type屬性并設置animation或transition來明確聲明所需要Vue監(jiān)聽的類型。6.1.6顯性的過渡持續(xù)時間

在大多情況下，Vue可以自動得出過渡效果的完成時機。默認情況下，Vue會等待其在過渡效果的根元素的第一個transitionend或animationend事件。然而也可以不這樣設定，例如，可以精心編排的一系列過渡效果，其中一些嵌套的內(nèi)部元素相比于過渡效果的根元素有延遲的或更長的過渡效果。

在這種情況下，可以用<transition>組件上的duration

prop定制一個顯性的過渡持續(xù)時間（以毫秒計）：<transition:duration="1000">...</transition>也可以定制進入和移出的持續(xù)時間：<transition:duration="{enter:500,leave:800}">...</transition>【例6-5】同時使用過渡與動畫和持續(xù)過渡時間實戰(zhàn)6.1.5同時使用過渡和動畫6.1.7JavaScript鉤子可以在屬性中聲明JavaScript鉤子。參考代碼如下所示：注意：當只用JavaScript過渡的時候，在enter和leave中必須使用done進行回調(diào)。否則，它們將被同步調(diào)用，過渡會立即完成。推薦對于僅使用JavaScript過渡的元素添加v-bind:css="false"，Vue會跳過CSS的檢測。這也可以避免過渡過程中CSS的影響。6.1.8Velocity動畫庫簡介1.Velocity.js簡介Velocity是一個簡單易用、高性能、功能豐富的輕量級JS動畫庫。它能和jQuery完美協(xié)作，并和$.animate()有相同的API，但它不依賴jQuery，可單獨使用。

Velocity不僅包含了$.animate()的全部功能，還擁有顏色動畫、轉(zhuǎn)換動畫(transforms)、循環(huán)、緩動、SVG動畫、和滾動動畫等特色功能。同時還支持duration、loop、delay、display等動畫配置項的設置。

Velocity比$.animate()更快更流暢，性能甚至高于CSS3animation，是jQuery和CSS3transition的最佳組合，它支持所有現(xiàn)代瀏覽器。2．velocity的使用Velocity引入方法如下：<scriptsrc="/ajax/libs/velocity/1.5.0/velocity.min.js"></script>也可以將velocity.min.js文件下載到本地項目開發(fā)的公共子文件夾js中，供本地地調(diào)用。<scriptsrc="../js/velocity.min.js"></script>【基本語法】Velocity(element,{property:value},{option:optionvalue});【語法說明】element：表示DOM元素。{}：表示屬性值對，可以有多個屬性值對。要在同一個元素上鏈接另一個動畫，只需在之前的velocity后再添加一個。Velocity(element1,{property:value},{option:optionValue});Velocity(element1,{property:value},{option:optionValue});【例6-6】JavaScript鉤子與velocity.js結(jié)合使用實戰(zhàn)。6.1.8Velocity動畫庫簡介6.2初始渲染的過渡

可以通過appear屬性設置節(jié)點在初始渲染(出現(xiàn)時)的過渡。這里默認和進入/離開過渡一樣，同樣也可以自定義CSS類名。標記語法如下：<transition

appear

appear-class="custom-appear-class"

appear-to-class="custom-appear-to-class"

appear-active-class="custom-appear-active-class"

>

<!--

...

-->

</transition>

也可以自定義JavaScript鉤子。標記語法如下：<transition

appear

v-on:before-appear="customBeforeAppearHook"

v-on:appear="customAppearHook"

v-on:after-appear="customAfterAppearHook"

v-on:appear-cancelled="customAppearCancelledHook"

>

<!--

...

-->

</transition>

在上面的例子中，無論是appear屬性，還是v-on:appear鉤子都會生成初始渲染過渡。6.3多個元素的過渡

最常見的多標記過渡是一個列表和描述這個列表為空消息的元素。標記語法如下：<transition>

<ul

v-if="items.length

>

0">

<!--

...

-->

</ul>

<p

v-else>對不起，沒有發(fā)現(xiàn)列表項.</p>

</transition>

注意：當有相同標記名的元素切換時，需要通過key屬性設置唯一的值來標識，以讓Vue區(qū)分它們，否則Vue為了效率只會替換相同標記內(nèi)部的內(nèi)容。即使在技術上沒有必要，給在<transition></transition>組件中的多個元素設置key是一個更好的實踐。

在一些場景中，也可以通過給同一個元素的key屬性設置不同的狀態(tài)來代替v-if和v-else。上面的例子可以改寫如下格式：<transition>

<button

v-bind:key="isEditing">

{{

isEditing

?

'保存'

:

'編輯'

}}

</button>

</transition>

6.3多個元素的過渡

使用多個v-if的多個元素的過渡可以重寫為綁定了動態(tài)property的單個元素過渡。<transition>

<button

v-if="docState

===

'saved'"

key="saved">編輯</button>

<button

v-if="docState

===

'edited'"

key="edited">保存</button>

<button

v-if="docState

===

'editing'"

key="editing">取消</button>

</transition>

這種形式也可以重定義為如下格式：<!--HTML部分

-->

<transition>

<button

v-bind:key="docState">

{{

buttonMessage

}}

</button>

</transition>

…//JS部分

computed:

{

buttonMessage:

function

()

{

switch

(this.docState)

{

case

'saved':

return

'編輯'

case

'edited':

return

'保存'

case

'editing':

return

'取消'

}

}

}

在下列部分代碼中，在“on”按鈕和“off”按鈕的過渡中，兩個按鈕都被重繪了，一個離開過渡的時候，另一個開始進入過渡。這是<transition></transition>的默認行為（進入和離開同時發(fā)生）。<transition

name="no-mode-fade">

<button

v-if="on"

key="on"

@click="on

=

false">on</button>

<button

v-else

key="off"

@click="on

=

true">off</button>

</transition>

<style>

.no-mode-fade-enter-active,

.no-mode-fade-leave-active

{transition:

opacity

.5s}

.no-mode-fade-enter,.no-mode-fade-leave-to

{opacity:

0}

</style>

Vue提供了過渡模式，通過mode屬性來設置，其值為“in-out/out-in”。其作用：in-out：新元素先進行過渡，完成之后當前元素過渡離開。out-in：當前元素先進行過渡，完成之后新元素過渡進入。<transition

name="with-mode-fade"

mode="out-in">

<button

v-if="on"

key="on"

@click="on

=

false">

on

</button>

<button

v-else=""

key="off"

@click="on

=

true">

off

</button>

</transition>

其中in-out模式不經(jīng)常使用，但對于一些稍微不同的過渡效果還是很有用的。過渡模式-mode屬性【例6-7】多個元素的過渡綜合實戰(zhàn)【例6-7】多個元素的過渡綜合實戰(zhàn)-2【例6-7】多個元素的過渡綜合實戰(zhàn)-36.4多個組件的過渡

多個組件的過渡簡單很多，一般不需要使用key屬性。相反，可以只需要使用動態(tài)組件。使用“內(nèi)置組件+v-bind:is”可以實現(xiàn)動態(tài)組件?！净A語法】

<transition

name="component-fade"

mode="out-in">

<component

v-bind:is="display"></component>

</transition>

【語法說明】<component></component>元素是Vue里面的一個內(nèi)置組件。使用“is”屬性（需要通過v-bind給“is”綁定一個值）?！癷s”綁定的值（display）傳入一個組件名，就會切換到這個組件?！纠?-8】多組件過渡的實戰(zhàn)第55～57行定義動態(tài)組件,使用component內(nèi)置組件并綁定is屬性（值為“display”）來動態(tài)渲染組件。第23～31行定義過渡類樣式【例6-8】多組件過渡的實戰(zhàn)-2

6.5列表過渡

我們已經(jīng)熟悉了單個節(jié)點、同一時間渲染多個節(jié)點中的一個過渡/動畫的方法。那么如果需要動態(tài)渲染整個列表，例如使用v-for去遍歷所有的列表項呢？在這種場景中，不能使用<transition></transition>組件，需要使用<transition-group></transition-group>組件。

在深入案例之前，先了解一下關于這個組件的一些特點：(1)不同于<transition></transition>，它會以一個真實元素呈現(xiàn)，默認為一個<span></span>。可以通過tag屬性更換為其他元素。代碼舉例如下：<transition-groupname="list"tag="p"><spanv-for="iteminitems"v-bind:key="item"class="list-item">{{item}}</span>

</transition-group>(2)過渡模式不可用，因為不再相互切換特有的元素。(3)內(nèi)部元素總是需要提供唯一的key屬性值。(4)CSS過渡的類將會應用在內(nèi)部的元素中，而不是這個組/容器本身。6.5.1列表的進入/離開過渡

使用<transition-group></transition-group>來渲染列表，通過name屬性來定義過渡的CSS類名。其語法如下：<ul>

<transition-group

name="myList">

<li

v-for="(student,index)

in

students"

:key="">

{{index}}------{{}}------{{student.age}}

</li>

</transition-group>

</ul>

【例6-9】列表的進入/離開過渡?！纠?-9】列表的進入/離開過渡【例6-9】列表的進入/離開過渡-2這是列表過渡初始效果這是列表成員增加時入場過渡效果這是列表成員離場過渡效果6.5.2列表的排序過渡<transition-group>組件不僅可以實現(xiàn)列表的進入和離開動畫，還可以改變定位。要使用這個新功能只需了解新增的類v-move，它會在元素的改變定位的過程中應用。與之前的類名一樣，可以通過name屬性來自定義前綴，也可以通過move-class屬性來手動設置。v-move對于設置過渡的切換時機和過渡曲線非常有用。需要借助于lodash.min.js來實現(xiàn)數(shù)組切換的各種效果。1．Lodash.js簡介

Loash.js是一個一致性、模塊化、高性能的JavaScript實用工具庫。通過降低array、number、objects、string等的使用難度，從而讓JavaScript變得更簡單。Lodash的模塊化方法適用場景：(1)遍歷array、object和string(2)對值進行操作和檢測(3)創(chuàng)建符合功能的函數(shù)2．引入Lodash(1)JS本地引入。直接在官網(wǎng)上下載相關的lodash.js包，放在自己的開發(fā)項目中，然后在需要使用的文件中引入：<scriptsrc="lodash.js"></script>。(2)CDN加速引入。一般使用bootcdn來直接在線引入，通過CDN加速文件下載訪問：<scriptsrc="/lodash.js/4.17.15/lodash.core.min.js"></script>。(3)直接通過依賴包注入。使用webpack或者glup的打包模式，可以直接在自己的項目中掛載lodash的依賴包，具體方法可參考官網(wǎng)（/）?！纠?-10】列表排序過度實戰(zhàn)

未單擊按鈕之前狀態(tài)單擊“打亂排序”按鈕后過渡狀態(tài)單擊“重新排序”按鈕后過渡結(jié)束狀態(tài)【例6-10】列表排序過度實戰(zhàn)-2

第8行采用本地引入lodash.min.js。第11行通過定義myList-move類樣式為轉(zhuǎn)換過渡1秒的效果。第29～34行定義方法shuffle()、newSort()實現(xiàn)打亂數(shù)組順序（洗牌）和重新排序的功能。其中shuffle()方法調(diào)用lodash.min.js的內(nèi)部方法_.shuffle(array)，完成數(shù)組元素重新排序。6.5.3列表的交錯過渡

通過data屬性與JavaScript通信，就可以實現(xiàn)列表的交錯過渡?！纠?-11】使用Velocity.js實現(xiàn)列表的交錯過渡實戰(zhàn)第22～38行定義transition-group組件，用于動態(tài)渲染列表，并定義name屬性，同時在屬性中聲明了3個JavaScript鉤子，分別為before-Enter、enter、leave（代碼第26～28行）。6.5.3列表的交錯過渡

第68～71行定義beforeEnter(el)方法，參數(shù)為el，設置opacity和height初始值均為0。第72～78行定義enter(el,done)方法，參數(shù)分別為el、done(回調(diào))，該方法中通過setTimeout()方法延時執(zhí)行Velocity()方法，在該方法中重新設置opacity和height的屬性值，作為過渡的另一種狀態(tài)，當Velocity執(zhí)行完動畫之后,complete這個屬性對應的內(nèi)容會被自動執(zhí)行，接下來的鉤子周期繼續(xù)執(zhí)行。第79～84行定義leave(el,done)方法，結(jié)構(gòu)和功能與enter(el,done)類似,只是將opacity和height改為另一種狀態(tài)?！纠?-11】使用Velocity.js實現(xiàn)列表的交錯過渡實戰(zhàn)列表初始展示效果輸入查詢子串后列表開始交錯過渡效果輸入查詢子串后列表交錯過渡終止時元素渲染結(jié)果本章小結(jié)本章主要介紹了Vue過渡與動畫。重點講解了單元素/組件的過渡、初始渲染的過渡、多個元素的過渡、多個組件的過渡及列表過渡。單組件或單元素的過渡可