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 #146

Closed
sharq1 opened this issue Feb 22, 2017 · 2 comments
Closed

Show transition is not being correctly displayed #146

sharq1 opened this issue Feb 22, 2017 · 2 comments

Comments

@sharq1
Copy link

sharq1 commented Feb 22, 2017

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"

my dom

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?

@rasentry
Copy link

Taken from https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

Care should also be taken when using a transition immediately after adding the element to the DOM using .appendChild() or removing its display: none; property. This is seen as if the initial state had never occurred and the element was always in its final state. The easy way to overcome this limitation is to apply a window.setTimeout() of a handful of milliseconds before changing the CSS property you intend to transition to.

@taion
Copy link
Member

taion commented Nov 8, 2017

We've removed transitions from this library.

@taion taion closed this as completed Nov 8, 2017
JP1998 added a commit to turniere/turniere-frontend that referenced this issue Apr 16, 2019
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)
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