Better ReactCSSTransitionGroup docs

[sophiebits]

Given the confusion #568, seems like our docs aren't quite good enough here. Right now we have:

In this component, when a new item is added to ReactTransitionGroup it will get the example-enter CSS class and the example-enter-active CSS class added in the next tick. This is a convention based on the transitionName prop.

but that's all.

[plievone]

Related issues / pull requests which may affect the docs: #761, #756, #719, #669, #536, #508, #161

[MalucoMarinero]

There could be a section that specifically states the timeline of the classes being applied, something like:

Timing of Animation Classes

Animation classes are applied on top of each component's regular css classes. When an animation starts it goes through the following sequence:

Immediately: Adds the <animation-name>-enter class.
1 tick afterwards: Adds the <animation-name>-enter-active class.
At the end of the transition: Removes both animation classes.

Remember, because the classes are not kept after the animation is complete, don't depend on the animation classes to keep a component visible.

[markijbema]

Actually, I'm not sure whether 'at the end of the transition' is achievable. I think that should say very specific when it ends. Currently, it ends when any transition within this element ends (in my opinion, a bug), but even when fixed (#1301) it will end on the first transition (let's say you first transition visibility, and then color for instance). I think anything beyond that might have crazy cornercases.

Personally, I don't have a problem with this being handled incomplete, but it should be documented very well what is, and what isn't supported.

[sophiebits]

I think the docs here are good enough now; haven't heard much confusion.

[nmn]

I think the documentation for CSSGroup is pretty good. I think for the lower level Transition Group a few additions would really help. For example, the fact the callbacks have to asynchronous or they won't work. etc.