如何禁用Vue transition-group等待浏览器选项卡的选择？

Question

我有一个在v-for循环中生成的列表。缠绕它是像这样的transition-group：

<transition-group name="list">
    <tr v-for="item in items" :key="item.key" class="list-item">
        <td name="foo">{{item.foo}}</td>
        <td name="bar">{{item.bar}}</td>
    </tr>
</transition-group>

我已经设置了元素删除和创建的转换（在css中）：

.list-enter-active, .list-leave-active {
    transition: all 0.5s;
}

.list-enter {
    background-color: green;
}

.list-leave-to {
    background-color: red;
}

（从列表中删除之前闪烁红色。插入列表后闪烁绿色）

问题是，如果选择浏览器上的另一个选项卡，并在列表上进行更新，则转换将等待选择Vue的选项卡。然后才会执行转换。

我希望过渡动画能够实时执行，如果未选择更新列表时的浏览器选项卡，则无论如何都要执行运行（或忽略）动画。有没有办法做到这一点？

更新：

在Vue GitHub repo上创建了问题 - https://github.com/vuejs/vue/issues/9890

Answer 1

得到了在GitHub repo中创建的问题的答案 - link to answer。如果有人偶然遇到同样的问题，请将其发布在此处：

不幸的是，这是由于浏览器在标签处于非活动状态时触发转换事件的方式。

如果这对你正在做的动画类型有问题，你应该转而使用JS而不是CSS动画。这样，您可以使用js hooks结束动画调用完成回调：https://vuejs.org/v2/guide/transitions.html#JavaScript-Hooks