總所周知，vue中的transition標(biāo)簽可以方便得進(jìn)行動(dòng)畫(huà)過(guò)渡，使用的方法也很簡(jiǎn)單。

<transition name="你要的名字">
  過(guò)渡的元素...
</transition>

這里需要主要一點(diǎn)的是：過(guò)渡的元素只能是以下之一：

條件渲染 (使用 v-if)
條件展示 (使用 v-show)
動(dòng)態(tài)組件
組件根節(jié)點(diǎn)

常用的過(guò)渡名稱有fade等

你可以這樣用

<transition name="fade">
  過(guò)渡的元素...
</transition>

實(shí)現(xiàn)的效果就是淡入淡出。

如果需要自定義過(guò)渡動(dòng)畫(huà)的，記得在css中修改以下的類(lèi)名：

你要的名字-enter             進(jìn)入前效果
你要的名字-enter-active     進(jìn)入的過(guò)渡時(shí)間和函數(shù)
你要的名字-enter-to         進(jìn)入后效果
你要的名字-leave             離開(kāi)前效果
你要的名字-leave-active     離開(kāi)的過(guò)渡時(shí)間和函數(shù)
你要的名字-leave-to         離開(kāi)后效果

寫(xiě)到這里相信大家都已經(jīng)會(huì)簡(jiǎn)單地使用transition了。

請(qǐng)閱讀以下的代碼：

<transition name="fade">
   <div v-if="show">
     <div class="item-box"></div>
   </div>
   <div v-else>
     <span>暫無(wú)更多</span>
   </div>
</transition>

結(jié)果是完全沒(méi)有淡入淡出的效果，那這是什么原因?qū)е聇ransition不起作用呢？

原因在這里：

當(dāng)有相同標(biāo)簽名的元素切換時(shí)，需要通過(guò) key 特性設(shè)置唯一的值來(lái)標(biāo)記以讓 Vue 區(qū)分它們，否則 Vue為了效率只會(huì)替換相同標(biāo)簽內(nèi)部的內(nèi)容。即使在技術(shù)上沒(méi)有必要，給在 <transition> 組件中的多個(gè)元素設(shè)置 key 是一個(gè)更好的實(shí)踐。

所以需要這樣寫(xiě)：

<transition name="fade">
   <div v-if="show" key="box1">
     <div class="item-box"></div>
   </div>
   <div v-else key="box2">
     <span>暫無(wú)更多</span>
   </div>
</transition>

刷新運(yùn)行，完美實(shí)現(xiàn)效果～～～～

參考資料：https://cn.vuejs.org/v2/guide/transitions.html

補(bǔ)充：

問(wèn)題1：不同類(lèi)型的組件之間切換，有過(guò)渡效果，而相同組件(不同內(nèi)容)切換則沒(méi)有過(guò)渡效果

vue官網(wǎng)的描述：當(dāng)有相同標(biāo)簽名的元素切換時(shí)，需要通過(guò) key 特性設(shè)置唯一的值來(lái)標(biāo)記以讓 Vue 區(qū)分它們，否則 Vue 為了效率只會(huì)替換相同標(biāo)簽內(nèi)部的內(nèi)容。即使在技術(shù)上沒(méi)有必要，給在 組件中的多個(gè)元素設(shè)置 key 是一個(gè)更好的實(shí)踐。

改進(jìn)后代碼

<transition :name="slide">
 <keep-alive>
  <component 
   :is="questionMap[currentQuestion.type]"
   :key="index"
   :currentQuestion="currentQuestion"
   :index="index">
  </component>
 </keep-alive>
</transition>

給組件添加了key=”index”了之后，不管任何類(lèi)型都有過(guò)渡效果了，因?yàn)榇藭r(shí)vue將每一個(gè)組件區(qū)分為不同的組件

問(wèn)題2：前一個(gè)組件滑動(dòng)出去后，后一個(gè)組件沒(méi)有滑動(dòng)效果，而是直接顯示了

過(guò)渡模式有一個(gè)問(wèn)題：一個(gè)離開(kāi)過(guò)渡的時(shí)候另一個(gè)開(kāi)始進(jìn)入過(guò)渡。這是 的默認(rèn)行為 - 進(jìn)入和離開(kāi)同時(shí)發(fā)生，因?yàn)檫@樣也導(dǎo)致了兩個(gè)卡片的過(guò)渡不太復(fù)合需求，我們需要的是一個(gè)先離開(kāi)后另一個(gè)再進(jìn)入。

同時(shí)生效的進(jìn)入和離開(kāi)的過(guò)渡不能滿足所有要求，所以 Vue 提供了 過(guò)渡模式

• in-out：新元素先進(jìn)行過(guò)渡，完成之后當(dāng)前元素過(guò)渡離開(kāi)。
• out-in：當(dāng)前元素先進(jìn)行過(guò)渡，完成之后新元素過(guò)渡進(jìn)入。

因此我們需要在transition標(biāo)簽中添加mode來(lái)達(dá)成效果：

<transition :name="slide" mode="out-in">
 <keep-alive>
  <component 
   :is="questionMap[currentQuestion.type]"
   :key="index"
   :currentQuestion="currentQuestion"
   :index="index">
  </component>
 </keep-alive>
</transition>

如果要使用列表排序的話，需要使用transition-group，下面是一個(gè)簡(jiǎn)單的例子

<div id="list-demo" class="demo">
 <button v-on:click="add">Add</button>
 <button v-on:click="remove">Remove</button>
 <transition-group name="list" tag="p">
  <span v-for="item in items" v-bind:key="item" class="list-item">
   {{ item }}
  </span>
 </transition-group>
</div>

new Vue({
 el: '#list-demo',
 data: {
  items: [1,2,3,4,5,6,7,8,9],
  nextNum: 10
 },
 methods: {
  randomIndex: function () {
   return Math.floor(Math.random() * this.items.length)
  },
  add: function () {
   this.items.splice(this.randomIndex(), 0, this.nextNum++)
  },
  remove: function () {
   this.items.splice(this.randomIndex(), 1)
  },
 }
})

.list-item {
 display: inline-block;
 margin-right: 10px;
}
.list-enter-active, .list-leave-active {
 transition: all 1s;
}
.list-enter, .list-leave-to
/* .list-leave-active for below version 2.1.8 */ {
 opacity: 0;
 transform: translateY(30px);
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論