ReactCSSTransitionGroupの何が問題なのですか？

Question

私は私のコンポーネントでrender()関数内のコードを持っている：

.. 
<ReactCSSTransitionGroup 
    transitionName="testing" 
    transitionEnterTimeout={600} 
    transitionLeaveTimeout={600}> 

    <div>testing animations!</div> 

</ReactCSSTransitionGroup> 
.. 

と私は私のCSSファイルでこのコードを持っている：

.testing-enter { 
    animation: slideIn 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); 
} 
.testing-leave { 
    animation: slideOut 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); 
} 

@keyframes slideIn { 
    0% { 
     opacity 0 
     transform translate3d(-50px, 0, 0) 
    } 
    100% { 
     opacity 1 
     transform translate3d(0, 0, 0) 
    } 
} 
@keyframes slideOut { 
    0% { 
     opacity: 1 
     transform: translate3d(0, 0, 0) 
    } 
    100% { 
     opacity: 0 
     transform: translate3d(50px, 0, 0) 
    } 
} 

私はちょうど、右からslideInに私divブロックをしたいが、何も起こりません！間違ったコードを見つけることができませんでした。

Answer 1

<ReactCSSTransitionGroup/>タグ内に静的なコンテンツがあります。動的なコンテンツが必要です。たとえば、マウスをクリックしたときに<div>testing animations!</div>をレンダリングする必要があるとします。変数に子を割り当て、マウスクリック時に変数を変更する必要があります。

let myDiv = buttonClicked ? <div>testing animations!</div> : <div></div> 

<ReactCSSTransitionGroup 
    transitionName="testing" 
    transitionEnterTimeout={600} 
    transitionLeaveTimeout={600}> 

    {myDiv} 

</ReactCSSTransitionGroup> 

アクションが実行されず、単に最初のマウント時にアニメーションする必要がある場合は、代わりにトランジションが使用されます。

ReactCSSTransitionGroupは 成分の初期マウントに余分な遷移フェーズを追加するオプションプロップtransitionAppear、 を提供します。最初のマウント時には、transitionAppearのデフォルト値がfalseであるため、通常は移行フェーズはありません。 以下は の例で、値がtrueのprop transitionAppearを渡します。

<ReactCSSTransitionGroup transitionName="example" transitionAppear={true} transitionAppearTimeout={500}> 
    <div>testing animations!</div> 
</ReactCSSTransitionGroup> 


.example-appear { 
    opacity: 0.01; 
} 

.example-appear.example-appear-active { 
    opacity: 1; 
    transition: opacity .5s ease-in; 
}