ReactCSSTransitionGroupアニメーションが動作しないままにする

Question

ReactCSSTransitionGroupで動作するアニメーションを取得できません。私はDOM -ENTERと-leaveスタイルルート変更に適用されているだけ-ENTER両方を見れば

.fade-enter { 
    opacity: 0.01; 
} 
.fade-enter.fade-enter-active { 
    opacity: 1; 
    transition: opacity 500ms ease-in; 
} 
.fade-leave { 
    opacity: 1; 
} 
.fade-leave.fade-leave-active { 
    opacity: 0.01; 
    transition: opacity 500ms ease-in; 
} 

：次のスタイルで

<ReactCSSTransitionGroup 
    transitionName="fader" 
    transitionEnterTimeout={500} 
    transitionLeaveTimeout={500}> 
    {React.cloneElement(children, { 
    key: pathname 
    })} 
</ReactCSSTransitionGroup> 

：私は、次のコードを持っていますスタイルはアニメーション化されています。ルート間をすばやくクリックすると、離脱アニメーションが表示されますが、以前のルートの場合は表示されます。私。私がA - > B - > Aに行くと、私はAに戻ります。休暇のアニメーションは簡単にちらつきます。

Answer 1

アニメーションが適用されていることが分かりましたが、divがオフスクリーンになっていました。おっとっと。前のページに休暇のアニメーションを付ける場合は、経路をアニメーション化するときには、position:absoluteまたはそれに似たものを画面上に追加する必要があります。