快捷導(dǎo)航

關(guān)于vue狀態(tài)過渡transition不起作用的原因解決

更新時間：2019年04月09日 14:13:43 作者：jacktime23

這篇文章主要介紹了關(guān)于vue狀態(tài)過渡transition不起作用的原因解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

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

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

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

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

常用的過渡名稱有fade等

你可以這樣用

<transition name="fade">
  過渡的元素...
</transition>

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

如果需要自定義過渡動畫的，記得在css中修改以下的類名：

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

寫到這里相信大家都已經(jīng)會簡單地使用transition了。

請閱讀以下的代碼：

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

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

原因在這里：

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

所以需要這樣寫：

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

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

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

補(bǔ)充：

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

vue官網(wǎng)的描述：當(dāng)有相同標(biāo)簽名的元素切換時，需要通過 key 特性設(shè)置唯一的值來標(biāo)記以讓 Vue 區(qū)分它們，否則 Vue 為了效率只會替換相同標(biāo)簽內(nèi)部的內(nèi)容。即使在技術(shù)上沒有必要，給在組件中的多個元素設(shè)置 key 是一個更好的實(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”了之后，不管任何類型都有過渡效果了，因?yàn)榇藭rvue將每一個組件區(qū)分為不同的組件

問題2：前一個組件滑動出去后，后一個組件沒有滑動效果，而是直接顯示了

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

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

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

因此我們需要在transition標(biāo)簽中添加mode來達(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，下面是一個簡單的例子

<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);
}

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

您可能感興趣的文章: