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

Question

I have a list generated in a v-for loop. Wrapped around it is a transition-group like so:
<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>
I have set a transition ( in css) on element deletion and creation:
.list-enter-active, .list-leave-active {
transition: all 0.5s;
}
.list-enter {
background-color: green;
}
.list-leave-to {
background-color: red;
}
(Flash red before removing from the list. Flash green after inserting into the list)
The problem is that, if another tab on the browser is selected, and update on a list is made, the transition waits for the tab where Vue is to be selected. And only then transition gets executed.
I would want for transition animation to execute real time and, if the browser tab at the time of the update of the list is not selected, then execute run (or ignore) the animation anyway.
Is there a way to do that?
UPDATE:
Created issue on Vue GitHub repo - https://github.com/vuejs/vue/issues/9890

Answer 1

Got an answer to the issue created in the GitHub repo - link to answer. Will post it here in case if someone stumbles upon the same problem:
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://v2.vuejs.org/v2/guide/transitions.html#JavaScript-Hooks