總所周知，vue中的transition標簽可以方便得進行動畫過渡，使用的方法也很簡單。

10年積累的網(wǎng)站制作、成都網(wǎng)站設(shè)計經(jīng)驗，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認識你，你也不認識我。但先做網(wǎng)站后付款的網(wǎng)站建設(shè)流程，更有永定免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

  過渡的元素...

這里需要主要一點的是：過渡的元素只能是以下之一：

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

常用的過渡名稱有fade等

你可以這樣用

  過渡的元素...

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

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

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

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

請閱讀以下的代碼：

   

     

   
   

     暫無更多
   

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

原因在這里：

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

所以需要這樣寫：

   

     

   
   

     暫無更多
   

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

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

補充：

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

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

改進后代碼

給組件添加了key=”index”了之后，不管任何類型都有過渡效果了，因為此時vue將每一個組件區(qū)分為不同的組件

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

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

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

• in-out：新元素先進行過渡，完成之后當前元素過渡離開。
• out-in：當前元素先進行過渡，完成之后新元素過渡進入。

因此我們需要在transition標簽中添加mode來達成效果：

如果要使用列表排序的話，需要使用transition-group，下面是一個簡單的例子

 Add
 Remove
 
  
   {{ item }}
  
 

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í)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。