CODEWITHSUNDEEP
reactjs
Kirk Ross
Kirk Ross

Reputation: 7153

Correct way to use ReactCSSTransitionGroup?

I'm trying to implement simple CSS fade in for pages and am having to do add a ton of timeout props to avoid console Failed PropType errors. It says something about it not being supported in future versions of React.

Any thoughts?

<ReactCSSTransitionGroup 
  transitionName="pagefade"
  transitionAppear={true}
  transitionEnterTimeout={500}
  transitionAppearTimeout={500}
  transitionLeaveTimeout={500}
>

Upvotes: 1

Views: 3421

Answers (1)

fabio.sussetto
fabio.sussetto

Reputation: 7065

You are supposed to provide these timeout props as they are needed by React to properly deal with the transition durations.

See here: https://github.com/facebook/react/blob/master/src/addons/transitions/ReactCSSTransitionGroup.js#L29 they warn you these timeouts have become necessary, while they were optional before.

My understanding is that there's no reliable way to properly synchronise DOM node mounting/unmounting with the transition durations you specify in your CSS.

For example, imagine you want your element to fade out before being unmounted. You want the opacity transition to be fully completed before React actually removes the DOM node for you, otherwise the animation would be cut. So you need to tell react the duration of your animation explicitly, because probably it's too complicated or unreliable for React to try and guess that duration for you (as they realised in the most recent versions).

Upvotes: 4

Related Questions