-
Notifications
You must be signed in to change notification settings - Fork 48.6k
CSSTransitionGroupChild should generate markup with -enter class already applied #719
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Comments
Hi, here's a nice explanation of the transition timeline: #587 (comment) In your jsfiddle the |
Thks @plievone Somehow I had to use this trick on my app , to make the animation work properly. Otherwise the entering view was appearing briefly into the view before sliding in from the right. I can't reproduce this bug in the fiddle maybe because the demo is too simple, I'll see if I can update it to demonstrate my point... |
ComponentDidMount should happen on the same tick, so first the elements are inserted, and then its class is modified on the same tick, or at least these commands are flushed to browser's rendering system on the same tick. It would be nice to know if on some occasions (heavy updates?) this could result in a problem you have seen? Perhaps some other callbacks (in other components, in React core?) before that component's componentDidMount could trigger a repaint in the browser via some dom measurement need? |
There is indeed a race condition in ReactTransitionableChild. If you add some other component which forces a repaint on componentDidMount, such as accessing |
I updated the fiddle to demonstrate the bug |
A brief look at the mounting procedure (https://github.com/facebook/react/blob/23ab30f/src/core/ReactCompositeComponent.js#L688-L720) suggests that to prevent races, transitions should use |
Is there any progress on this? |
Sorry, no progress on this. It's hard to make this happen automatically with our current architecture. |
Would adding Or is there some other workaround for this which I'm not seeing? Or is there a better alternative to ReactCSSTransitionGroup at this point? EDIT: for the record, my workaround (and this wont work for everyone) is to do something like this:
|
I’m going to close since we don’t plan any more changes to TransitionGroup in React repo. Instead, it now is maintained by the community, and you can file an issue in the new repository if this is still affecting you. Thanks! |
Checkout this project as an alternative: https://github.com/wikiwi/react-css-transition |
Hello there,
I am playing with React transition
I noticed that the -enter classe is added only after the element has been inserted into the dom.
https://github.com/facebook/react/blob/master/src/addons/transitions/ReactTransitionableChild.js#L147-L150
I thought the active class was applied when the component was mounted into the dom.
Here is a small demo: http://jsfiddle.net/437Us/1/
I am using componentWillUpdate to make sure the class is applied directly. If you remove it, and use the same
transition mechanism on a more complex layout sometime you will see the page flashing into the screen before the transition starts
The text was updated successfully, but these errors were encountered: