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!

Answer 1

See my answer here: https://stackoverflow.com/a/37206517/3794660

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.