多個(gè)元素過渡(設(shè)置key)
*當(dāng)有相同標(biāo)簽名的元素切換時(shí)，需要通過 key 特性設(shè)置唯一的值來標(biāo)記以讓 Vue 區(qū)分它們，否則 Vue 為 了效率只會(huì)替換相同標(biāo)簽內(nèi)部的內(nèi)容。
mode:in-out ; out-in

<style>.kerwin-enter-active,.kerwin-leave-active {transition: all .5s}.kerwin-enter,.kerwin-leave-to {opacity: 0;transform: translateX(100px);}.bounce-enter-active {animation: bounce-in .5s;}.bounce-leave-active {animation: bounce-in .5s reverse;}@keyframes bounce-in {0% {transform: translateX(100px);opacity: 0;}100% {transform: translateX(0px);opacity: 1;}}</style>

利用條件編譯指令v-if與v-else實(shí)現(xiàn)多元素內(nèi)容切換

transition添加name屬性命名

設(shè)置過渡狀態(tài)

狀態(tài)管理

• 測(cè)試后發(fā)現(xiàn)并沒有過渡效果，分析原因Vue在多個(gè)元素切換過程中會(huì)盡量復(fù)用DOM，如果不加key，那么vue會(huì)選擇復(fù)用節(jié)點(diǎn)(Vue的就地更新策略)，導(dǎo)致之前節(jié)點(diǎn)的狀態(tài)被保留下來，由此產(chǎn)生一系列的bug。
• 方案：給多元素添加不同key進(jìn)行狀態(tài)管理

<div id="box"><button @click="isShow= !isShow">click</button><transition name="bounce" mode="out-in"><p v-if="isShow" key="1">11111111111</p><div v-else>tramisu</div><p v-else key="2">222222222</p></transition></div><script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var vm = new Vue({el: "#box",data: {isShow: true}})</script>

• ①in-out：新元素先進(jìn)行過渡，完成之后當(dāng)前元素過渡離開（不是經(jīng)常用到，但對(duì)于一些稍微不同的過渡效果還是有用的）
• ②out-in：當(dāng)前元素先進(jìn)行過渡，完成之后新元素過渡進(jìn)入

總結(jié)

以上是生活随笔為你收集整理的vue-transition多元素过渡的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。