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过渡隐藏