Staggering components on enter with react css transition group

Question

I would like to add a stagger effect to all children that get rendered within a ReactCssTransitionsGroup but do not know how to go about it. I looked at this question but would like to try do it using the react transitions group. If it isn't possible then I will do something similar to the above linked question.

my transition component is quite simple:

Transitions({component: 'div', transitionName: 'stagger'},
    [1, 2, 3, 4, 5].map(i =>
            div({className: 'pure-u-md-1-3 pure-u-lg-1-4 medium-box demo', key: i})
    )
)

Answer 1

8 months later and I have found the best way to do this, without ReactCSSTransitionsGroup. The TransitionsGroup component is badly maintained and as a result tends to have some disruptive ui bugs:

• Components not leaving DOM when switching tabs
• Components not leaving DOM when there are a lot of entering/leaving components

to name but a few...

Enter react-motion - A highly performant animation library that gives the developer a lot of control. Including staggering animations for free! After using it for some time I can highly recommend it as a complete replacement for ReactTransitionGroup.

Answer 2

The official ReactCSSTransitionsGroup is badly maintained, it is being split off into its own repository react-transition-group to breathe in new life.

If you care about smooth animations even on lower end mobile devices than react-motion is not a good solution, you will still need to rely on CSS transitions.

You can try out react-css-transition which aims to give you reliable CSS transitions in React.

• Disclaimer, I'm the creator of react-css-transition