vue transition動(dòng)畫(huà)連續(xù)觸發(fā)混亂

%E5%8A%A8%E7%94%BB.gif

如圖，一開(kāi)始，慢慢點(diǎn)擊的時(shí)候，動(dòng)畫(huà)是正常的；但是后來(lái)連續(xù)點(diǎn)擊，動(dòng)畫(huà)就會(huì)錯(cuò)亂，我大概找到原因是，leave-enter還沒(méi)結(jié)束，enter就已經(jīng)觸發(fā)，不不知道怎么解決，代碼如下：

求大神┭┮﹏┭┮

回答

編輯回答

臭榴蓮

試一試 mode="in-out"
使用 transition；使用 key 可以也可以渲染多個(gè)元素

地址：多個(gè)元素的過(guò)渡

2017年1月4日 05:37

編輯回答

硬扛

mode="out-in"

2018年3月27日 21:10

編輯回答

巷尾

謝謝上面的回答，確實(shí)是過(guò)度模式的問(wèn)題：
一個(gè)離開(kāi)過(guò)渡的時(shí)候另一個(gè)開(kāi)始進(jìn)入過(guò)渡就會(huì)導(dǎo)致上面的問(wèn)題
1.out-in當(dāng)前元素先進(jìn)行過(guò)渡，完成之后新元素過(guò)渡進(jìn)入。
2.in-out新元素先進(jìn)行過(guò)渡，完成之后當(dāng)前元素過(guò)渡離開(kāi)。
3.transition-group的mode是沒(méi)法生效的，所以只能用transition
4.我這邊使用的是v-show，相當(dāng)于visiblity:hidden，所以導(dǎo)致一開(kāi)始只能用transition-group，換成v-if加上過(guò)渡模式就解決了

2017年11月12日 13:57