Transition group classes not being properly deleted when using v-show

[ma7moudat]

Version

2.3.3

Reproduction link

https://jsfiddle.net/ma7moudat/u82ugj8z/1/

Steps to reproduce

Set up a transition group that automatically rotates through a list of items and shows one item at a time (a slider if you will).

What is expected?

The last item disappears and the new item appears at the specified intervals.

What is actually happening?

Everything seems to be running perfectly fine, but if you leave the window for a minute or so (go to a new tab or another window) and then come back, the transition group becomes a mess, because the transition classes get added over and over without being removed from the items.

So you would get something like this!

<div class="item crossfade-enter-to crossfade-enter-to crossfade-leave-to crossfade-enter-to crossfade-leave-to crossfade-enter-to crossfade-leave-to crossfade-enter-to crossfade-leave-to crossfade-enter-to crossfade-leave-to crossfade-enter-to crossfade-leave-to crossfade-enter-to crossfade-leave-to crossfade-enter-to crossfade-leave-to .........">

[sqal]

I don't think we're dealing with Vue issue here. Chrome/Firefox are throttling timers in inactive tabs to simply reduce ram/cpu usage, so you can't rely on setTimeout running every x second as you want it to. A solution for your problem is rather simple, pause the animation when user leaves to another tab, and then restart it when he comes back

Fixed example - https://jsfiddle.net/605wqn3k/1/

[ma7moudat]

Makes sense. Thanks a lot for the quick response :)

But I still gotta ask, is there anything against checking if transition classes already exsist when the change occurs regarldess of whether transitionend/animationend was fired or not?

[yunyu]

I think this issue also occurs when the tab is still active, not just when it's hidden. I'm getting the following after adding several elements to my transition group:

The docs state that the enter-to class should be removed after the transition finishes.

[jkzing]

@yunyu Could you please check this issue ? Is it related with your situation?

[yunyu]

@jkzing Actually, yeah, it seems to affect me as well. Any transitions I put in the enter-active class don't work at all, and only the ones in enter-to do. Should I move my example to that issue?

[jkzing]

@yunyu, thanks, but there is already a quite clear reproduce in that issue.😁

[alexbazilev]

I was going to create a new issue, but found this one. My bug is different, but it seems that it might help to solve current issue, because I've created a very simple situation how to reproduce this transition bug.

Reproduction link: https://jsfiddle.net/ace7s75e/

Steps to reproduce:

1. Click on "Show/Hide" button;
2. Switch to another browser tab (you have only 2 seconds to do it);
3. Go back to JsFiddle and see that the message is not displayed.

What is expected? (and it works like this if not switching browser tabs)

1. After clicking on "Show/Hide" button the fiddle waits for 2 seconds and hides the message.
2. Then the fiddle waits for 1 more second and shows up the message.

What is actually happening? After clicking on "Show/Hide" button and switching to another browser tab during those 2 seconds - when you come back you will not see the message, because of class="fade-leave-to" in <p>-element.

[jkzing]

@alexbazilev I think your case is a different situation, created a separate issue for you: https://github.com/vuejs/vue/issues/7411

---

NVM, your are in the situation https://github.com/vuejs/vue/issues/5800#issuecomment-315089833 is saying, sorry for the spam...😂

[RonanCamus]

Any update on this ? I'm building a chrome extension that clicks on buttons when the tab isn't active. Some elements doesn't show because of this problem. Tab inactive -> animation not finished.

I'd love a workaround ✌️