リアクタトランジションのアニメーションにタイムアウトがありません

Question

私のコードは公式React-Router git repoの例に非常によく似ています。ここで

Here is a codepen that shows the problem.

問題です：代わり​​属性で指定した時間を待つのではなく、新しい要素がすぐにレンダリングされます。両方のCSSアニメーション（入力と終了）が同時に実行されます。その後、前の要素は削除されます。

私はもう少し複雑な設定で同じ問題をローカルに持っています。そのため、単純なコードを作成して問題のある場所を確認しました。

私はすべてのフレームワークの最新バージョンを使用しています（反応-アドオン-CSS-遷移グループを、反応-ルータを、反応）

const App = ({children, location}) => { 
    return (
     <ReactCSSTransitionGroup 
      component="div" 
      transitionName="app" 
      transitionEnterTimeout={500} 
      transitionLeaveTimeout={500} 
     > 
      {children && React.cloneElement(children, { 
       key: location.pathname, 
      })} 
     </ReactCSSTransitionGroup> 
    ); 

Answer 1

​​を開始する前に遅らせるためにどのくらい説明していません遷移。その値は、ノードから.<name>-enterクラスを削除するまでの待機時間を表します。

入力トランジションを遅らせたい場合は、CSSのトランジションに遅延を追加する必要があります。

transition: $type $time $mode $delay; 

また、遅延の長さによって​​を拡張する必要があります。

transitionEnterTimeout={1000}