Added a delay property to the Transition component

[taabooone]

Added a delay property to the transition component.

use case: I want to stagger the appearing/entering/exiting of components.

usage:

{ objects.map(( obj, idx ) => (
   <Transition delay={{ 
      enter: 200 * idx,
      exit: 100 * idx, 
    }} 
   >
      {obj}
   </Transition>
))}

[jquense]

hey there thanks for the PR. We've talked a bit about adding this in the past (see #78) and I believe the conclusion was that this sort of thing is better left to higher level implementations of Transition, since delays are often builtin to the animation strategy (transition or animation for instance in css). This makes it hard to successfully integrate a timeout based delay with css transitions, because of timer drift and other js implementation details.

I guess the TL; DR; on this is if you are using CSSTransition this is already possible with the native delay properties.

[silvenon]

@taabooone do you think there's a benefit to adding the delay prop in comparison to modifying the value of the timeout prop by adding the delay?

[taabooone]

@silvenon The timeout prop does not directly cause a delay on the animation to happen. It will just increase the time from Entering -> Entering-done when using CSSTransition. The reason I went for a delay is to stagger the transition when I was adding a ton of elements at once.

[silvenon]

Staggering is indeed a common animation practice, but also mainly eye-candy.

In my opinion the main reason why react-transition-group is so useful is because it can animate the existence of a component in the DOM, which is something that CSS transitions can't do. In that context having a delay feature might be confusing because then the question becomes "why don't we just change the in prop later?".

In other words, I can't imagine a scenario where you would want to add a bunch of components to the DOM at slightly different times, that would be bad for performance, but I can imagine one where you want to make it look that way, which is outside the scope of this library. Would a library like react-motion be a better fit for your desired effect?

In any case, thanks a lot for your effort. 🏆 In the future, before implementing new features you can search if there was an existing proposal, and if there isn't, open an issue first to start a discussion. 😉