vue之队列过渡组效果,后进先出坑点
<transition-group name="rightWd" tag="div"> <!-- <transition-group name="topWd" tag="div"> --> <div v-for="(item, index) in warnList" :key="index" @click="showDetail(item, index, true)"> <div v-for="(item, index) in warnList" :key="item.id" @click="showDetail(item, index, true)"> homeNewAlarmWarning(list) { list.forEach(item => { this.warnList.push(item); window.setTimeout(() => { this.warnList.shift(); }, 10000); }); },
.topWd-enter-active { animation: topWdOut 0.5s ease; } .topWd-leave-active { animation: topWdLevel 0.5s ease; } @keyframes topWdOut { 0% { transform: translateY(150px); opacity: 0; } 100% { transform: translateY(0px); opacity: 1; } } @keyframes topWdLevel { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-150px); opacity: 0; } }
vue的虚拟dom,
如果key用index
你用index, 1-100,变成 1-99,无论你删哪个,框架都会认为你把key = 100的元素删掉了,
效果为最后一个dom过渡显示,最后一个dom过渡隐藏
如果key用id唯一值,
效果为最后一个dom过渡显示,第一个dom过渡隐藏