What exactly is the timeout value in React CSS Transition Group doing?

Question

I've been reading the official docs for React Animations (React CSS Transition Group), but I'm a little unclear as to what the timeout values are used for - especially when I'm setting transitions within my CSS. Are the values a delay, duration of the animation, or how long that class is applied before being removed? And how do they relate to the duration of transitions set in my CSS?

For example, if I were to have a simple fade in/out when the component enters/leaves, I'd also set the opacity and transition duration within my CSS. Does the component then animated based on the timing passed in this value or the duration set within my CSS?

Here's an example provided by the official docs:

My React Component

<ReactCSSTransitionGroup 
  transitionName="example" 
  transitionEnterTimeout={500} 
  transitionLeaveTimeout={300}
>
  {items}
</ReactCSSTransitionGroup>

My .css file

.example-enter {
  opacity: 0.01;
}

.example-enter.example-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.example-leave {
  opacity: 1;
}

.example-leave.example-leave-active {
  opacity: 0.01;
  transition: opacity 300ms ease-in;
}

Thanks!

Querulous

Answer 1

See my answer here: https://mcmap.net/q/661373/-correct-way-to-use-reactcsstransitiongroup

Imagine you want to fade out an element. The durations are needed because React must wait for the CSS animation to complete before adding/removing the classes and finally removing the element. Otherwise you won'd be able to see the full animation, as the DOM element would be removed immediately.

https://github.com/facebook/react/blob/master/src/addons/transitions/ReactCSSTransitionGroupChild.js#L97

If you have a look at this code here: https://github.com/facebook/react/blob/v15.3.2/src/addons/transitions/ReactCSSTransitionGroupChild.js#L95 you can see how React used to try and calculate the timeouts for you. Now that's been deprecated and you're supposed to explicitly tell React the duration of your CSS animations (presumably because guessing has some major overhead/inconsistency.

Moonset

I still don't understand why it is needed. Doesn't React have a synthetic onTransitionEnd event for exactly that purpose? – Fakieh

Answer 2

From the page you linked:

You'll notice that animation durations need to be specified in both the CSS and the render method; this tells React when to remove the animation classes from the element and -- if it's leaving -- when to remove the element from the DOM.

Urbannai

I love the fact to discourage the use of Transition and use CSSTransition instead (probably not to have styles in .js), while in the same time enforcing to duplicate an obscure deep timeout value that might change over time, and one will forget to update in both places. – Giguere