ReactCSSTransitionGroupを使用する正しい方法は？

Question

私は単純なCSSのフェードインをページに実装しようとしていますが、コンソールに失敗したPropTypeエラーを避けるために大量のタイムアウト小道具を追加する必要があります。 Reactの将来のバージョンではサポートされていないことがあります。

どのような考えですか？

<ReactCSSTransitionGroup 
    transitionName="pagefade" 
    transitionAppear={true} 
    transitionEnterTimeout={500} 
    transitionAppearTimeout={500} 
    transitionLeaveTimeout={500} 
> 

Answer 1

これらのタイムアウト小道具は、移行期間を適切に処理するために必要なときに、Reactが提供するものとします。

ここをクリックしてください：https://github.com/facebook/react/blob/master/src/addons/transitions/ReactCSSTransitionGroup.js#L29これらのタイムアウトが必要になったと警告します。

DOMノードのマウント/アンマウントをCSSで指定した遷移時間と適切に同期させる方法がないことをご理解ください。

たとえば、アンマウントする前に要素をフェードアウトさせたいとします。 Reactが実際にあなたのためにDOMノードを削除する前に、不透明度の遷移を完全に完了させたい場合は、アニメーションがカットされます。そのため、アニメーションの時間を明示的に反応させる必要があります。これは、Reactが（最近のバージョンで実現したように）あなたの時間を試して推測するには、おそらく複雑すぎるか信頼できないからです。