最近在做公司項(xiàng)目時(shí)，涉及到做一個(gè)問卷調(diào)查吼具，需要在不同題目題目之間使用transition產(chǎn)生一個(gè)過渡效果：當(dāng)點(diǎn)擊按鈕進(jìn)入下一題時(shí)僚纷，當(dāng)前卡片從正中間向左滑動(dòng)至不可見后，下一題對(duì)應(yīng)的卡片從右邊不可見區(qū)域從右向左滑動(dòng)至屏幕正中間拗盒，在這個(gè)過程中我發(fā)現(xiàn)了幾個(gè)問題怖竭，下面是該部分對(duì)應(yīng)的代碼
<transition :name="slide">
<keep-alive>
<component
:is="questionMap[currentQuestion.type]"
:currentQuestion="currentQuestion"
:index="index">
</component>
</keep-alive>
</transition>
問題1：不同類型的組件之間切換，有過渡效果陡蝇，而相同組件(不同內(nèi)容)切換則沒有過渡效果
vue官網(wǎng)的描述：當(dāng)有相同標(biāo)簽名的元素切換時(shí)痊臭，需要通過 key 特性設(shè)置唯一的值來標(biāo)記以讓 Vue 區(qū)分它們，否則 Vue 為了效率只會(huì)替換相同標(biāo)簽內(nèi)部的內(nèi)容登夫。即使在技術(shù)上沒有必要广匙，給在 組件中的多個(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”了之后恼策，不管任何類型都有過渡效果了鸦致，因?yàn)?br> 此時(shí)vue將每一個(gè)組件區(qū)分為不同的組件
問題2：前一個(gè)組件滑動(dòng)出去后，后一個(gè)組件沒有滑動(dòng)效果涣楷，而是直接顯示了
過渡模式有一個(gè)問題：一個(gè)離開過渡的時(shí)候另一個(gè)開始進(jìn)入過渡蹋凝。這是 的默認(rèn)行為 - 進(jìn)入和離開同時(shí)發(fā)生，因?yàn)檫@樣也導(dǎo)致了兩個(gè)卡片的過渡不太復(fù)合需求总棵，我們需要的是一個(gè)先離開后另一個(gè)再進(jìn)入鳍寂。
同時(shí)生效的進(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，下面是一個(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);
}
轉(zhuǎn)自: vue組件切換時(shí)使用過渡(transition)時(shí)應(yīng)該注意的一些事項(xiàng)_Encorehwang的博客-CSDN博客
