render メソッドが指示しているときに、適用されReactTransitionGroup
たばかりの要素が後で.superfade-leave-active
適用されないという問題があります。.superfade-enter
http://jsfiddle.net/joecritch/6bpJD/3/
ロジックは、表示されるメッセージがReactTransitionGroup
リストの最初の項目であり、私のUserSearchResults
コンポーネントが 2 番目の項目です。後者は、データがロードされたときにのみ表示されます。(データは上部で配列としてモックされ、500 ミリ秒の遅延で読み込まれます。)
望ましい結果:リストにテキストがある場合は常に最初の要素が表示されます。秒は、データがロードされるたびに常に表示されます
実際の結果:最初の要素は期待どおりに機能します。2 番目は最初に表示されますが、500 ミリ秒後にテキストが変更されると、アニメーションが消えます。
注: animate コンポーネントを削除すると、期待どおりに機能します。