Geek Answers Handbook

Stunning components to enter css transition group

I would like to add a step effect to all the children who appear in the ReactCssTransitionsGroup but don’t know how to do it. I reviewed this question, but would like to try to do it using the transition group. If this is not possible, I will do something similar to the above related question.

my transition component is pretty 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}) ) )
+5
source share
2 answers

8 months later , and I found a better way to do this without ReactCSSTransitionsGroup. The TransitionsGroup component is poorly supported and, as a result, has some distorting errors:

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

to name a few ...

Introduce react-motion - A high- performance animation library that gives the developer great control. Including stunning animations for free! After using it for some time, I can highly recommend it as a complete replacement for the ReactTransitionGroup.

+3
source

The official ReactCSSTransitionsGroup is poorly maintained; it detaches from its own react-transition-group repository in order to breathe new life.

If you care about smooth animation even on lower-level mobile devices than the reaction to movement, this is not a good solution; you still have to rely on CSS transitions.

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

  • Disclaimer, I'm the creator of a css transition reaction
+1
source

More articles:


All Articles