多個元素過渡(設置key)
*當有相同標簽名的元素切換時，需要通過 key 特性設置唯一的值來標記以讓 Vue 區(qū)分它們，否則 Vue 為 了效率只會替換相同標簽內(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實現(xiàn)多元素內(nèi)容切換

transition添加name屬性命名

設置過渡狀態(tài)

狀態(tài)管理

• 測試后發(fā)現(xiàn)并沒有過渡效果，分析原因Vue在多個元素切換過程中會盡量復用DOM，如果不加key，那么vue會選擇復用節(jié)點(Vue的就地更新策略)，導致之前節(jié)點的狀態(tài)被保留下來，由此產(chǎn)生一系列的bug。
• 方案：給多元素添加不同key進行狀態(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īng)常用到，但對于一些稍微不同的過渡效果還是有用的）
• ②out-in：當前元素先進行過渡，完成之后新元素過渡進入

總結

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

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