Vue系列連載又繼續(xù)了，公眾號(hào)和微信號(hào)都接到了伙伴們的催更，最近忙于工作，沒(méi)來(lái)得及時(shí)更新《Vue2.0進(jìn)階》的教程文章，大家久等了。

?

這一節(jié)我們來(lái)學(xué)習(xí)如何利用Vue提供的transition組件實(shí)現(xiàn)一些過(guò)渡效果，同時(shí)利用上一節(jié)《Vue開(kāi)發(fā)調(diào)試神器Vue-devtools》來(lái)幫助我們調(diào)試，這也是為什么要先學(xué)習(xí)Vue-devtools的原因。

?

實(shí)現(xiàn)過(guò)渡的動(dòng)畫(huà)效果已經(jīng)不是什么稀奇的事，是每一個(gè)前端開(kāi)發(fā)者都要必備的技能。在不依賴第三方框架的庫(kù)的前提下，實(shí)現(xiàn)動(dòng)畫(huà)最簡(jiǎn)單的辦法就是使用CSS3給我們提供的屬性。這一節(jié)，我們將會(huì)使用CSS3的transition屬性來(lái)實(shí)現(xiàn)我們的想要的效果。

?

如果還沒(méi)了解CSS3的transition屬性的小伙伴可以事先去了解一下，如果一時(shí)半會(huì)實(shí)在沒(méi)條件（正在擠地鐵呢）去查閱transition屬性，可以繼續(xù)往下看，前端君會(huì)穿插著講一些transition屬性的內(nèi)容。

?

除了CSS3的transition屬性，Vue提供的組件也叫transition，可別混淆了，它們是兩個(gè)不同的東西，僅僅是長(zhǎng)得一樣罷了。

<transition/>組件

?<transition/>?組件的寫(xiě)法：

?<transition name="box"></transition>

我們會(huì)給?<transition/>?組件添加一個(gè)屬性name，我們?nèi)∶麨閎ox。

?

然后呢，然后怎樣才會(huì)有動(dòng)畫(huà)效果呢，?<transition/>?組件什么時(shí)候才能起作用呢？

<transition/>起作用

Vue提供的?<transition/>?組件，會(huì)在下列四種情況下起作用：

????1. 條件渲染（使用v-if）

????2. 條件展示（使用了v-show）

????3. 動(dòng)態(tài)組件

????4. 組件根節(jié)點(diǎn)

?

在上述的任意一種情況發(fā)生的時(shí)候（比如：v-show的值為true切換成false的時(shí)候），我們可以給?<transition/>?組件包含的節(jié)點(diǎn)元素添加entering/leaving過(guò)渡動(dòng)畫(huà)效果。

?

那我們?nèi)绾翁砑游覀兿胍倪^(guò)渡效果呢？

?

過(guò)渡原理分析

原來(lái)，當(dāng)一個(gè)被?<transition/>?組件包含的節(jié)點(diǎn)出現(xiàn)了以上的4種情況的任意一種的時(shí)候，Vue自動(dòng)嗅探目標(biāo)元素是否應(yīng)用了 CSS 過(guò)渡或動(dòng)畫(huà)，如果是，在恰當(dāng)?shù)臅r(shí)機(jī)添加/刪除 CSS 類名。

?

所謂的：“在恰當(dāng)?shù)臅r(shí)機(jī)添加/刪除 CSS 類名”，其實(shí)是：

1.v-enter：進(jìn)入過(guò)渡效果（enter）剛剛開(kāi)始那一刻。在元素被插入或者show的時(shí)候生效，在下一個(gè)幀就會(huì)立刻移除，一瞬間的事。

?

2.v-enter-active: 表示進(jìn)入過(guò)渡（entering）的結(jié)束狀態(tài)。在元素被插入時(shí)生效，在 transition/animation 完成之后移除。

?

3.v-leave: 離開(kāi)過(guò)渡（leave）的開(kāi)始那一刻。在離開(kāi)過(guò)渡被觸發(fā)時(shí)生效，在下一個(gè)幀移除，也是一瞬間的事。

?

4.v-leave-active：離開(kāi)過(guò)渡（leaving）的結(jié)束狀態(tài)。在離開(kāi)過(guò)渡被觸發(fā)時(shí)生效，在 transition/animation 完成之后移除。

?

看文字看不懂沒(méi)關(guān)系，用圖來(lái)解釋可能會(huì)直觀一點(diǎn)。

假設(shè)一個(gè)被?<transition/>?組件包含的節(jié)點(diǎn)從隱藏到顯示（稱之為進(jìn)入過(guò)渡），它會(huì)被依次添加一些類class，如圖：

反之，如果是從顯示到隱藏（稱之為離開(kāi)過(guò)渡），它會(huì)被依次添加一些類class，如圖：

注意：.v-enter中的v-只是前綴，如果我們?<transition/>?組件的name值為box，那么它實(shí)際的class為 .box-enter。

既然Vue給我們提供了這些class類，我們就可以編寫(xiě)這些class的內(nèi)容來(lái)實(shí)現(xiàn)我們想要的過(guò)渡效果了。

?

實(shí)戰(zhàn)小案例

講到這里，似乎還似懂非懂，總感覺(jué)理解的不是很透徹，當(dāng)然，還沒(méi)動(dòng)手敲一遍，怎么會(huì)透徹，那接下來(lái)我們?cè)賮?lái)一個(gè)例子演示一遍。

我們先來(lái)看看要實(shí)現(xiàn)的案例效果（如下圖），再一步一步來(lái)實(shí)現(xiàn)它。

(我是gif，加載有點(diǎn)慢)

首先，先引入我們的vue.js文件，這里就不演示了。

我們先用html布局：

<div id="app" class="app">
??? <button class="btn">切換</button>
??? <div class="container">
??????? <div class="box"></div>
??? </div>
</div>

Javascript部分：

<script>
??? const app = new Vue({
??????? el:"#app",
??????? data:{
??????????? showBox:false
??????? }
??? });
</script>
?

相信學(xué)過(guò)《Vue2.0基礎(chǔ)系列》的同學(xué)看上面這兩段代碼應(yīng)該是毫無(wú)壓力了。CSS樣式布局就不展示，無(wú)非是定義各個(gè)節(jié)點(diǎn)的寬高顏色罷了。

?

上面data中的showBox的值默認(rèn)是為fasle，我們來(lái)修改代碼，實(shí)現(xiàn)點(diǎn)擊切換box節(jié)點(diǎn)的顯示/隱藏。

代碼稍做修改：

<button
??????? @click="showBox = !showBox"
??????? class="btn">
??? 切換
</button>

給?<button/>?組件添加vue的點(diǎn)擊事件處理程序，每次點(diǎn)擊“切換”按鈕的時(shí)候?qū)?strong>showBox的值取反，就能實(shí)現(xiàn)box元素的顯示/隱藏，非常好理解。

?

我們順便打開(kāi)開(kāi)發(fā)者工具，找到Vue面板：

我們來(lái)看看切換的效果：

（我是gif，加載有點(diǎn)慢）

通過(guò)?Vue調(diào)試面板我們可以看到，當(dāng)我們不斷點(diǎn)擊的時(shí)候，showBox的值不斷的取反，而頁(yè)面的效果也是在我們的預(yù)料之中，box元素節(jié)點(diǎn)不斷在顯示和隱藏之間切換。但是，box節(jié)點(diǎn)只是簡(jiǎn)單生硬的切換隱藏/顯示，并沒(méi)有任何過(guò)渡效果。

?

當(dāng)然啦，因?yàn)樽钪匾?<transition/>?組件我們還沒(méi)用上呢？

接著我們?cè)傩薷拇a：

<transition name="box">
??? <div v-show="showBox" class="box">
??????? i am the box
??? </div>
</transition>

我們看到，原來(lái)的box節(jié)點(diǎn)元素，現(xiàn)在嵌套在了?<transition/>?組件的內(nèi)部，并且name屬性的值為box。當(dāng)我們的showBox再取反的時(shí)候，Vue就會(huì)在適當(dāng)?shù)臅r(shí)候添加相應(yīng)的class類名了。

比如，當(dāng)它進(jìn)入過(guò)渡的時(shí)候（隱藏→顯示），就會(huì)依次發(fā)生：

????1. 添加.box-enter

? ? 2. ?刪除.box-enter，添加 .box-enter-active

? ? 3. ?刪除.box-enter-active

?

當(dāng)它離開(kāi)過(guò)渡的時(shí)候（顯示→隱藏），就會(huì)依次發(fā)生：

????1. 添加.box-leave

????2. 刪除.box- leave，添加 .box- leave-active

????3. 刪除.box- leave -active

?

有了這些class，我們就可以根據(jù)自己的需要，給它們添加內(nèi)容。

/*box節(jié)點(diǎn)本身的樣式*/
.box{
??? width:100%;
??? height:100%;
??? text-align: center;
??? line-height: 200px;
??? background: #ff8282;
??? color: #Fff;
??? /*以下兩個(gè)默認(rèn)值，可不寫(xiě)*/
? ?/*寫(xiě)上只是為了便于講解，記住這兩個(gè)*/
??? opacity: 1;
??? margin-left: 0;
}

提示：這是box節(jié)點(diǎn)原本的樣式，最后兩個(gè)CSS屬性的是都是默認(rèn)值，寫(xiě)出來(lái)是為了便于后面的理解。

我們需要定義進(jìn)入和離開(kāi)過(guò)渡動(dòng)畫(huà)效果，這里用到了CSS3的transition屬性。

.box-enter-active,.box-leave-active{
??? transition: all .8s;
}

這里的transition表示 box節(jié)點(diǎn)所有屬性的變化都會(huì)運(yùn)用此過(guò)渡效果，過(guò)渡時(shí)間為0.8秒，是CSS3中transition屬性的知識(shí)。

?

然后我們?cè)僭O(shè)置進(jìn)入過(guò)渡（entering）的樣式，因?yàn)槲覀兿胍男Ч莃ox節(jié)點(diǎn)從右往左滑動(dòng)進(jìn)入，并且透明度由淺到深，所以一開(kāi)始那一刻的樣式設(shè)置為：

.box-enter{
??? opacity: 0;
??? margin-left: 100%;
}

當(dāng)進(jìn)入下一幀的時(shí)候，.box-enter立刻被刪除，opactity的值由0變成上面定義的默認(rèn)值：1，margin-left的值由100%變成上面定義的默認(rèn)值：0，與此同時(shí)也添加了.box-enter-active，正因?yàn)?strong>.box-enter-active里面的transition屬性定義了過(guò)渡效果，所以，屬性的變化達(dá)到了慢慢過(guò)渡的效果。

?

而離開(kāi)過(guò)渡（leaving）的時(shí)候，是從左到右滑動(dòng)離開(kāi)的，并且透明度也是由深到淺，直到透明。所以離開(kāi)過(guò)渡一開(kāi)始那一刻的樣式和默認(rèn)樣式一樣，我們無(wú)需重復(fù)定義。

而離開(kāi)過(guò)渡（leaving）最后的一刻的樣式是：

.box-leave-active{
??? opacity: 0;
??? margin-left: 100%;
}

跟.box-enter的樣式一樣，進(jìn)入那一刻從右邊進(jìn)場(chǎng)，最后離開(kāi)完成那一刻，回到了右邊。（從哪里來(lái)，會(huì)哪里去）

?

最后我們看看效果，是不是我們想要的：

（我是gif，加載有點(diǎn)慢）

?

完美，成功地運(yùn)用Vue給開(kāi)發(fā)者提供的?<transition/>?組件實(shí)現(xiàn)了過(guò)渡效果。

本節(jié)總結(jié)

理解Vue的??<transition/>??組件 ，配合CSS3的動(dòng)畫(huà)知識(shí)，就能隨心所欲地寫(xiě)出你想要的效果。 ? ? ??

推薦

擴(kuò)展閱讀

?1.《ECMAScript 6 系列》原創(chuàng)教程

?2.《Vue2.0基礎(chǔ)系列》原創(chuàng)教程

?3.《ECMAScript 6 系列》的 2 套習(xí)題

?4.《Vue2.0基礎(chǔ)系列》的 1 套習(xí)題

關(guān)于職場(chǎng)

?感悟：混口飯吃，談不上喜歡

?薪資：關(guān)于昨天的招聘薪資問(wèn)題

?鄭州招聘：招聘前端3~5人

?廣州招聘：招聘前端2人

資源推薦

其實(shí)學(xué)好技術(shù)并不難，架構(gòu)師免費(fèi)分享全網(wǎng)全套最新web前端、JavaScript、HTML5、PHP、數(shù)據(jù)庫(kù)……等視頻資料！

[總價(jià)值超3萬(wàn)！]年薪35萬(wàn)以上的大牛幾乎都看了！

加微信:?abc15689892?免費(fèi)領(lǐng)取，由于領(lǐng)取的朋友比較多，所以加微信時(shí)一定要備注：555，否則很難通過(guò)。

??

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的【vue2.0进阶篇】用transition组件轻松实现过渡效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。