ReactCSSTransitionGroup leaves DOM nodes with both `leave` and `enter` classes

[victor-homyakov]

After sequence of fast changes (add/delete operations) nodes under ReactCSSTransitionGroup are left stuck with classes example-leave example-enter-active example-leave-active. Further state modifications do not change rendered DOM tree. Console has multiple warnings

transition(): tried to perform an animation without an animationend or transitionend event after timeout (5000ms). You should either disable this transition in JS or add a CSS animation/transition. 

Test page: http://jsbin.com/kasurusa/2

1. Place cursor in input field
2. Type l then type Backspace very fast
3. Repeat step 2 few times

Easily reproduces in IE10, but could be also reproduced in Chrome 35.

[victor-homyakov]

Code in ReactCSSTransitionGroupChild sometimes is executed in wrong sequence.

It assumes that independent asynchronous callbacks flushClassNameQueue and endListener are always executed in proper sequence:

1. transition('leave')

   1.1 CSSCore.addClass(node, 'example-leave')

2. flushClassNameQueue

   2.1 CSSCore.addClass(this.getDOMNode(), 'example-leave-active')

3. endListener

   3.1 CSSCore.removeClass(node, 'example-leave'); CSSCore.removeClass(node, 'example-leave-active');

What sometimes happens:

1. transition('leave')

   1.1 CSSCore.addClass(node, 'example-leave') - initiates CSS transition

2. endListener - transition is finished

   2.1 CSSCore.removeClass(node, 'example-leave'); CSSCore.removeClass(node, 'example-leave-active');

3. flushClassNameQueue - only then setTimeout timer fired

   3.1 CSSCore.addClass(this.getDOMNode(), 'example-leave-active')

[shilpan]

@chenglou any updates on this?

[yurynix]

Encountered the same issue =\
@victor-homyakov You found any workaround?

[victor-homyakov]

Manual patching of those places where the classes are added/removed helped to some extent, but not completely. The algorithm of the addon should be rewritten to avoid using both event observers and timeouts simultaneously, but this requires some amount of time. Taking in account other issues easier was not to use this addon at all.

[felixakiragreen]

I have also encountered this issue with multiple DOM objects (20+) listening after a fast sequence of changes.

[lsvx]

I am seeing a similar issue as well. Sometimes, React does not always eliminate the enter and enter-active classes. In this case, transitioning to a different element will result in the former element remaining in the DOM.

[koistya]

+1 Just have bumped into the same issue.

[vmakhaev]

+1 Any chances that it will be fixed?

[koistya]

I was able to solve it by tweaking the order of state variables applied to the component's state. E.g.:

this.setState(updateAB) --> this.setState(updateA); this.setState(updateB);

[jmarr]

I've been running into this issue too. Usually with enter and enter-active not being removed as @lsvx mentioned.

[jmarr]

I just played around with Khan Academy's TimeoutTransitionGroup. I still see animation glitches occur, but the components do get correctly removed, so at least it prevents my app from getting stuck in a broken state.