Question

如何使用react-transition-group-v2和react-router-v4为输入子节点设置动画？例如，我们有关于包含3个子div节点的About组件。

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

如何设置每个<div>About</div>的转换动画。我已经试图取代{/ 1}}

<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回调。示例：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;
}

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

1 个答案: