Route animation transition with React Transition Group v2

Question

How can I animate child nodes on enter using react-transition-group-v2 and react-router-v4? For example we have About component that include 3 child div nodes.

class About extends React.Component {
render() {
 return (
  <div>
    <div>About</div>
    <div>About</div>
    <div>About</div>
  </div>
 );
}
}

How to animate transition of every single <div>About</div>. I've trided to replace <Route path="/about" component={About} /> on

function FirstChild(props) {
  const childrenArray = React.Children.toArray(props.children);
  return childrenArray[0] || null;
}
...
<Route path="/about"
       children={({ match, ...rest }) => (
       <TransitionGroup component={FirstChild}>
          {match && <About {...rest} />}
       </TransitionGroup>
       )}
/>

But I cannot understand how to add onEnter callback to each <div>. Example: https://codesandbox.io/s/n0566q62lj

Slawa Eremin Slawa Eremin · Accepted Answer · 2017-10-23T11:16:45

I think, you should try componentDidMount + simple css transition

class About extends React.Component {
  componentDidMount(){
    this.container.classList.add('run-animation');
  }

  render() {
    return (
      <div ref={ el => this.container = el }>
        <div className="item">About</div>
        <div className="item">About</div>
        <div className="item">About</div>
      </div>
    );
  }
}

.item{
  transition: opacity .3s ease;
  opacity: 0;
}

.item:nth-child(1){
  transition-delay: .3s;
}

.item:nth-child(2){
  transition-delay: .6s;
}

.item:nth-child(3){
  transition-delay: .9s;
}

.run-animation .item{
  opacity: 1;
}

Route animation transition with React Transition Group v2

1 Answers