Staggering components on enter with react css transition group
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 tabsComponents 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.
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