Skip to content
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

Closed
PedroFonseca opened this issue Mar 23, 2016 · 3 comments
Closed

Show transition is not being correctly displayed #70

PedroFonseca opened this issue Mar 23, 2016 · 3 comments

Comments

@PedroFonseca
Copy link

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 });
    }
  }
};

@PedroFonseca
Copy link
Author

I've seen the open PR (#31) from Marty for this and i do think this should be fixed.
In the meanwhile, i found out a way around this issue. For anyone also having this issue, this is what worked for me.
Since in my transition i don't need the entering or exiting stages, i setup my css transition like this:

.transition-fade {
    opacity: 0.3;
    filter: alpha(opacity=30);
    transition: opacity 500ms ease-in;
}
.transition-fade.in {
    opacity: 1;
    filter: alpha(opacity=100);
}

And then i use this jsx to render it
<Transition
  transitionAppear
  unmountOnExit
  in={this.props.visible}
  timeout={this.props.visible ? 0 : this.props.timeout}
  className={classNames(this.props.className, this.props.transitionName) }
  enteredClassName="in"
  >
      {this.props.children}
</Transition>

@taion
Copy link
Member

taion commented Jul 14, 2016

As with #31, I think this was fixed in #60.

@taion taion closed this as completed Jul 14, 2016
@sharq1
Copy link

sharq1 commented Feb 20, 2017

@taion it's still broken for me and I am forced to use above hack :(

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants