總所周知，vue中的transition標簽可以方便得進行動畫過渡，使用的方法也很簡單。
<transition name="你要的名字"> 過渡的元素...</transition>
這里需要主要一點的是：過渡的元素只能是以下之一：
條件渲染 (使用 v-if)
條件展示 (使用 v-show)
動態組件
組件根節點
常用的過渡名稱有fade等
你可以這樣用
<transition name="fade"> 過渡的元素...</transition>
實現的效果就是淡入淡出。
如果需要自定義過渡動畫的，記得在css中修改以下的類名：
你要的名字-enter 進入前效果
你要的名字-enter-active 進入的過渡時間和函數
你要的名字-enter-to 進入后效果
你要的名字-leave 離開前效果
你要的名字-leave-active 離開的過渡時間和函數
你要的名字-leave-to 離開后效果
寫到這里相信大家都已經會簡單地使用transition了。
請閱讀以下的代碼：
<transition name="fade"> <div v-if="show"> <div class="item-box"></div> </div> <div v-else> <span>暫無更多</span> </div></transition>
結果是完全沒有淡入淡出的效果，那這是什么原因導致transition不起作用呢？
原因在這里：
當有相同標簽名的元素切換時，需要通過 key 特性設置唯一的值來標記以讓 Vue 區分它們，否則 Vue為了效率只會替換相同標簽內部的內容。即使在技術上沒有必要，給在 <transition> 組件中的多個元素設置 key 是一個更好的實踐。
所以需要這樣寫：
<transition name="fade"> <div v-if="show" key="box1"> <div class="item-box"></div> </div> <div v-else key="box2"> <span>暫無更多</span> </div></transition>
刷新運行，完美實現效果～～～～
參考資料：https://cn.vuejs.org/v2/guide/transitions.html
補充：
問題1：不同類型的組件之間切換，有過渡效果，而相同組件(不同內容)切換則沒有過渡效果
vue官網的描述：當有相同標簽名的元素切換時，需要通過 key 特性設置唯一的值來標記以讓 Vue 區分它們，否則 Vue 為了效率只會替換相同標簽內部的內容。即使在技術上沒有必要，給在 組件中的多個元素設置 key 是一個更好的實踐。
改進后代碼
<transition :name="slide"> <keep-alive> <component :is="questionMap[currentQuestion.type]" :key="index" :currentQuestion="currentQuestion" :index="index"> </component> </keep-alive></transition>
給組件添加了key=”index”了之后，不管任何類型都有過渡效果了，因為此時vue將每一個組件區分為不同的組件
問題2：前一個組件滑動出去后，后一個組件沒有滑動效果，而是直接顯示了
過渡模式有一個問題：一個離開過渡的時候另一個開始進入過渡。這是 的默認行為 - 進入和離開同時發生，因為這樣也導致了兩個卡片的過渡不太復合需求，我們需要的是一個先離開后另一個再進入。
同時生效的進入和離開的過渡不能滿足所有要求，所以 Vue 提供了 過渡模式
因此我們需要在transition標簽中添加mode來達成效果：
<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);}以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
