vue-transition多元素过渡

多个元素过渡(设置key)
*当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为 了效率只会替换相同标签内部的内容。
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实现多元素内容切换

transition添加name属性命名

设置过渡状态

状态管理

• 测试后发现并没有过渡效果，分析原因Vue在多个元素切换过程中会尽量复用DOM，如果不加key，那么vue会选择复用节点(Vue的就地更新策略)，导致之前节点的状态被保留下来，由此产生一系列的bug。
• 方案：给多元素添加不同key进行状态管理

<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：新元素先进行过渡，完成之后当前元素过渡离开（不是经常用到，但对于一些稍微不同的过渡效果还是有用的）
• ②out-in：当前元素先进行过渡，完成之后新元素过渡进入

总结

以上是生活随笔为你收集整理的vue-transition多元素过渡的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。