reactjs - 使用 React Transition Group v2 路由动画过渡

Question

如何使用 react-transition-group-v2 和 react-router-v4 在进入时为子节点设置动画？例如，我们有关于包含 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 + 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;
}