リアクショントランジショングループv2を使用したルートアニメーショントランジション

Question

リアクショントランジショングループ-v2とリアクションルータ-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>のすべての遷移をアニメーション化する方法。私は

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

に<Route path="/about" component={About} />を交換するtridedてきた。しかし、私は、各<div>にコールバックをフォーカス取得時に追加する方法を理解することはできません。 例：https://codesandbox.io/s/n0566q62lj

Answer 1

私は、あなたが+シンプルな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; 
}