[Feature]: Sequenced / Staggered Transition Support

[setsun]

Do you want to request a feature or report a bug?

Feature

What is the current behavior?

Currently I don't believe there is support in the library for supporting sequenced or staggered transitions.

Example: Say I have 10 items that enter at the same time in a CSSTransitionGroup. The current behavior is that if I have a transitionEnter CSS class defined, all of these animate at the same time.

What is the expected behavior?

Following on the previous example, if I have 10 items that enter a CSSTransitionGroup at the same time I want to be able to specify if they stagger in or come one after another (opposed to animating at the same time). Example below for staggered transitions, the sequential one would be similar, but distinct in that transitions can only kick off after the previous one has finished.

Staggered Transition Example GIF

Ideas on implementation

• Staggered: I have a suboptimal solution implemented as a Higher-Order Component here using a setInterval (which is not great) here: https://github.com/Setsun/react-choreography/blob/master/src/transitions/sequenced/StaggeredTransitionDecorator.js

• Sequential: I think this could be implemented using transitionend events, where the next transitioning component mounts after the previous component fires off its transitionend event.

Thoughts? I could spin up a PR in my free time to get a quick proof of concept since I think this would be useful for others, but I also know the API is in-flux in this PR: #24

[setsun]

For anyone interested, I've opened a PR here: #78

[silvenon]

For posterity: see #78 and #340 for context about why we decided to not implement this feature.