React CSS Transition Groupのタイムアウト値はどのくらいですか？

Question

私はReact Animations (React CSS Transition Group)の公式ドキュメントを読んできましたが、特にタイムアウト値が使用されているかどうかは不明です。値は、遅延、アニメーションの継続時間、または削除されるまでにそのクラスが適用される期間ですか？そして、彼らは私のCSSで設定されたトランジションの持続時間にどのように関連していますか？

たとえば、コンポーネントの入力/出力時に単純なフェードイン/アウトを行う場合、CSS内で不透明度と遷移時間を設定します。コンポーネントは、この値で渡されたタイミングまたはCSS内で設定された持続時間に基づいてアニメーション化されますか？ここで

は、公式ドキュメントが提供する例を示します

私は

<ReactCSSTransitionGroup 
    transitionName="example" 
    transitionEnterTimeout={500} 
    transitionLeaveTimeout={300} 
> 
    {items} 
</ReactCSSTransitionGroup> 

私の.cssファイル

.example-enter { 
    opacity: 0.01; 
} 

.example-enter.example-enter-active { 
    opacity: 1; 
    transition: opacity 500ms ease-in; 
} 

.example-leave { 
    opacity: 1; 
} 

.example-leave.example-leave-active { 
    opacity: 0.01; 
    transition: opacity 300ms ease-in; 
} 

コンポーネントのおかげに反応します！あなたはリンク先のページから

Answer 1

：あなたはそのアニメーション期間はCSSとrenderメソッドの両方で指定する必要がわかります

。これはReactに、要素からアニメーションクラスをいつ削除するか、そして、それが離れる場合はDOMから要素を削除する時期を指示します。

Answer 2

ここに私の答えを参照してください：https://stackoverflow.com/a/37206517/3794660

あなたは要素をフェードアウトしたい想像してみてください。 Reactはクラスを追加/削除してから最後に要素を削除するまでに、CSSアニメーションが完了するまで待つ必要があるため、期間が必要です。それ以外の場合は、DOM要素がすぐに削除されるため、完全なアニメーションを見ることができます。

https://github.com/facebook/react/blob/master/src/addons/transitions/ReactCSSTransitionGroupChild.js#L97

あなたはここにこのコードを見てみると：https://github.com/facebook/react/blob/v15.3.2/src/addons/transitions/ReactCSSTransitionGroupChild.js#L95あなたはあなたのためのタイムアウトを試してみて、計算するために使用されるどのように反応するか見ることができます。さて、これは非難されており、CSSアニメーションの継続時間を明示的に指示することになっています（恐らく推測にはいくつかの大きなオーバーヘッド/不一致があるからです）。