react: CSSTransitionGroup transitions don't fire reliably unless `transition` set on -active class

Here is an example of how <ReactCSSTransitionGroup> is explained in the README:

http://jsfiddle.net/deadlyicon/kb3gN/4984/

It works.

Here is that same example except I’ve added a componentDidMount method that focuses a button within the component being transitioned:

http://jsfiddle.net/deadlyicon/kb3gN/4985/

Notice how the enter transition fails to animate.

This is possibly a browser bug but I thought I’d let you know anyway.

It’s also worth noting that this bug can be worked around by moving the transition out of .example-enter and into .example-enter.example-enter-active like so:

http://jsfiddle.net/deadlyicon/kb3gN/4986/

Hope this helps improve React 😄

About this issue

  • Original URL
  • State: closed
  • Created 10 years ago
  • Comments: 15 (7 by maintainers)

Most upvoted comments

Thanks for the fiddle! The bug happens also when the autoFocus attribute gets added to the Close button.