-
Notifications
You must be signed in to change notification settings - Fork 222
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
Show transition is not being correctly displayed #146
Comments
Taken from https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
|
We've removed transitions from this library. |
The appearance and disappearance of the group phase section will now be animated. The animation will have to be adjusted at some point, since currently the height is hardcoded. The reason for the library is, that react-bootstrap doesn't support animations anymore as of react-bootstrap/react-overlays#146 (comment)
There's been an issue for this that has been closed ( #70 ), but it's not resolved and I'm forced to use ugly hack posted there, that doesn't work well.
Original issue text below:
So i have a component that returns this jsx:
<Transition
transitionAppear
unmountOnExit
in={this.props.visible}
timeout={this.props.timeout}
className={classNames(this.props.className, this.props.transitionName) }
enteringClassName="entering"
enteredClassName="entered"
exitingClassName="exiting"
I'd expect that i could then simply change the props.visible to make my dom show/hide using the transition of my choice. The transition is correctly displayed when hiding the component (setting props.visible to false) but when showing the component it does not show a transition.
It looks to me that it renders the entering class to fast after the render of the component and react makes both updates on the DOM at the same time, and that in turn will make the transition not work.
I've played a little bit with the source code and found out that if i change the Transition.prototype.componentDidUpdate method to delay the performEnter just a bit (5 milliseconds worked for me) then it all works fine. I've tested it both in firefox and chrome.
Is this a real issue or am i doing something wrong?
The text was updated successfully, but these errors were encountered: