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

Posted 2023-03-06

【中文标题】Vue.JS 过渡组中的元素在离开时没有正确设置动画

【英文标题】：Elements in Vue.JS transition-group are not animating properly on-leave

【发布时间】：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的链接在帖子里

【参考方案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