-
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 #70
Comments
I've seen the open PR (#31) from Marty for this and i do think this should be fixed. .transition-fade { And then i use this jsx to render it |
@taion it's still broken for me and I am forced to use above hack :( |
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"
>
<div>my dom</div>
</Transition>
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?
Thanks in advance,
Pedro Fonseca
PS: This is the change i made to the componentDidUpdate method:
Transition.prototype.componentDidUpdate = function componentDidUpdate() {
if (this.props.unmountOnExit && this.state.status === EXITED) {
// EXITED is always a transitional state to either ENTERING or UNMOUNTED
// when using unmountOnExit.
if (this.props['in']) {
var that = this;
setTimeout(function () { that.performEnter(that.props); }, 5);
} else {
this.setState({ status: UNMOUNTED });
}
}
};
The text was updated successfully, but these errors were encountered: