React-transition-group: CSSTransition timeout property not explained on the main docs page

[pedropmota]

On the main docs page, the CodeSandBox example of CSSTransition has a "timeout" prop that, if removed, doesn't seem to affect the behavior on that example at all.

Based on a very simple scenario I just tested, I realized that it might be used to set the transition as "complete" if the CSS transition fails to do so before the timeout happens. I apologize if I'm mistaken, but just trying to clarify and maybe clear a possible confusion of CSSTransition's usage in the docs.

[silvenon]

The examples were outdated so we added new and more complex ones, hopefully those demonstrate the nuances better and are more accurate. The timeout prop is required, it defines the duration of the transition. The reason that the previous example looked fine without it is because it didn't have special props like unmountOnExit and it didn't use the render prop pattern. The classes were immediately added and removed and I'm guessing that browsers queue transitions in those cases, which made it look fine, but you should always add the timeout prop.

You can see this in our new example, if you remove the transition prop from the CSSTransition component containing the star, it will look the same as before, but if you remove it from the main one, it's a different story and the transitions will malfunction, for starters because they use the render prop.

Btw, the CSSTransition component inherits all props from Transition, so that's where you can find the rest of its documentation. Let me know if you have more questions, I'll be happy to explain. 😉

[pedropmota]

Flawless explanation. Thank you!
The new examples are looking really cool too. Really enjoying this library.