You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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
The text was updated successfully, but these errors were encountered:
setsun
changed the title
Feature Request: Sequenced / Staggered Transition Support
[Feature]: Sequenced / Staggered Transition Support
Jun 11, 2017
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.jsSequential: I think this could be implemented using
transitionend
events, where the next transitioning component mounts after the previous component fires off itstransitionend
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
The text was updated successfully, but these errors were encountered: