6

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})
    )
)
Community
  • 1
  • 1
Julien Vincent
  • 1,210
  • 3
  • 17
  • 40
  • Use and n-th child selector + a sass macro on the parent element. Never done it myself, but this is the basic idea: https://github.com/popcorn-time/popcorn-app/blob/master/sass/_movielist.scss#L116 – Duncan Finney Jul 29 '15 at 15:06
  • Looking at what you linked me - I would need to know how many child components and write a css descriptor for each one? – Julien Vincent Jul 29 '15 at 15:08
  • With that solution, you would (or at least have enough to cover the number of children). Since you're already in javascript land you could emulate that effect in code using inline styles. – Duncan Finney Jul 29 '15 at 15:10
  • That is true ^ I will give it a go when I can – Julien Vincent Jul 29 '15 at 15:11
  • What exactly do you mean when you say "stagger effect"? Do you want to render multiple components and have them appear one at a time? – Michael Parker Jul 29 '15 at 19:19
  • 1
    @Michael Parker Yes, [This kind of thing](http://jsfiddle.net/BinaryMuse/f51jbw2k/). I was wanting to know if there was a clean way to do it using ReactCssTransitionGroup. – Julien Vincent Jul 29 '15 at 21:08

2 Answers2

6

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.

Julien Vincent
  • 1,210
  • 3
  • 17
  • 40
3

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
Chi Vinh Le
  • 31
  • 2
  • This is a very interesting alternative. Even though I would argue that `react-motion` performs very well even on lower end devices (lower end being iPhone 5 / Samsung S3), it still doesn't beat css rendering. Good work Chi! – Julien Vincent Feb 02 '17 at 07:30
  • 3
    Additionally - could you provide an example of a stagger animation so as to fit within the scope of this question? – Julien Vincent Feb 02 '17 at 07:34
  • Don't mind the plug but wish it addressed the stagger question. – CodeAndCats Jan 24 '21 at 11:34