Question

我正在尝试用Vue.js 2中的动画实现android的吐司风格组件。我有以下用于转换的css：

require './app/controllers/users_controller.rb'

.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; }转换看起来很好 - 列表向上移动并且元素淡入，但是当一个元素被移除时，由于某种原因，要移除的元素跳转到底部然后淡出。

以下是它的样子：jsFiddle

Answer 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

Vue.JS过渡组中的元素没有正确的休假动画

1 个答案: