Vue.JS 过渡组中的元素在离开时没有正确设置动画答案

【问题标题】：Elements in Vue.JS transition-group are not animating properly on-leaveVue.JS 过渡组中的元素在离开时没有正确设置动画
【发布时间】：2017-08-14 16:51:11
【问题描述】：

我正在尝试在 Vue.js 2 中实现带有动画的 android 的 toast 样式组件。我有以下用于转换的 css：

.toast-enter-active {
    opacity: 0;
    transition: all 1s ease-out;
}
.toast-enter-to {
    opacity: 1;
}
.toast-leave {
    opacity: 1;
transition: all .7s ease-out;
}
.toast-leave-to {
    opacity: 0;
}

toast-enter 转换看起来不错 - 列表向上移动，元素淡入，但是当一个元素被移除时，由于某种原因，要移除的元素跳到底部然后淡出。

这是它的样子：jsFiddle

【问题讨论】：

您可以使用transition: opacity .7s ease-out; 而不是all，以防它试图为其他更改设置动画
我已经尝试过了 - 问题不在于哪些部分正在制作动画，问题是顶部元素首先被移动到底部，然后被移除。它应该被删除。
你能创造一个小提琴。
jsFiddle的链接在帖子里

标签： vue.js css-transitions css-animations vuejs2

【解决方案1】：

我发现了问题所在。 v-for 只是简单地回收元素，因为它使用索引作为键。我通过向每个 toast 添加一个 ID 字段并将其用作键来解决它：

模板标记：

        <div 
            v-for="(toast, index) in toasts"
            :key="toast.id"
            :class = "['toast',toast.type]"
        >

自己干杯：

        {text:'1 test',type:'info', id:1},
        {text:'2 test',type:'info', id:2},
        {text:'3 test',type:'info', id:3},

Updated jsFiddle

【讨论】：