Consider adding animation timeouts

[mr-mig]

ReactCSSTransitionGroup as well as some other components (e.g. React Overlays Transition have a timeout prop for handling the cases when transitionEnd or animationEnd events are interrupted.
I think it will be beneficial for this component as well.

[arve0]

Sounds sensible. Some questions:

1. Do you think the animation class should be removed on the timeout?
2. In which cases are animations interrupted?
3. Which difficulties does an interrupted animation give?

[mr-mig]

2. In which cases are animations interrupted?

According to Overlays Transition docs:

A Timeout for the animation, in milliseconds, to ensure that a node doesn't transition indefinately if the browser transitionEnd events are canceled or interrupted.

transitionEnd may be interrupted:

In the case where a transition is removed before completion, such as if the transition-property is removed, then the event will not fire.

animationEnd is not cancellable (per spec), but the animation may be interrupted:

Once an animation has started it continues until it ends or the ‘animation-name’ is removed

Or another possibility:

Setting the display property to ‘none’ will terminate any running animation applied to the element and its descendants

3. Which difficulties does an interrupted animation give?

If the animation is interrupted, then the "animation end hook" is not reliable and may break any logic associated with the hook (e.g. node remove will never happen, and the user will always see the element stuck in a mid of animation)

[mr-mig]

1. Do you think the animation class should be removed on the timeout?

Ideally, yes. If the timeout is specified less than animation-duration in css, it will forcibly stop the animation (which, IMO, is a desired effect in any case of timeout !== animation-duration)

[arve0]

Sorry about the late reply.

Would also checking animation-duration as a default for timeout make sense?

[mr-mig]

@arve0 I think it may be a reason to log a Warning