如何禁用等待选择浏览器选项卡的 Vue 转换组？

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 存储库上创建问题 - https://github.com/vuejs/vue/issues/9890

Answer 1

得到了 GitHub 存储库中创建的问题的答案 - link to answer。将 post 放在这里以防万一有人遇到同样的问题：

Unfortunately, this is due to how browsers trigger the transitioned events when tabs are inactive.

If this is problematic for the kind of animation you are doing, you should switch instead to something that uses JS instead of CSS animations. That way, you can end the animation calling the done callback with js hooks: https://vuejs.org/v2/guide/transitions.html#JavaScript-Hooks

如何禁用等待选择浏览器选项卡的 Vue 转换组？

How to disable Vue transition-group waiting for browser tab to be selected?

transition

vue.js

vuejs2