Staggering components on enter with react css transition group

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})
    )
)

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.