Маршрутный анимационный переход с React Transition Group v2

Question

Как я могу анимировать дочерние узлы при входе с использованием response-transition-g roup-v2 и response-router-v4? Например, у нас есть компонент About, который включает в себя 3 дочерних узла div.

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

Как оживить переход каждого <div>About</div>, Я решил заменить <Route path="/about" component={About} /> на

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

Но я не могу понять, как добавить обратный вызов onEnter для каждого <div>, Пример: https://codesandbox.io/s/n0566q62lj

Answer 1

Я думаю, вы должны попробовать componentDidMount + простой переход CSS

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