ReactCSSTransitionGroup讓動畫無法正常工作

我無法使用動畫來使用ReactCSSTransitionGroup。我有以下代碼：ReactCSSTransitionGroup讓動畫無法正常工作

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

與以下樣式：

.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; 
}

如果我看DOM兩個 - 輸入和-leave風格正在應用的路由變化，但只有 - 輸入風格是動畫。如果我在路線之間快速點擊，則假動畫確實顯示，但是對於之前的路線。即如果我回到A時A - > B - > A，則離開動畫會短暫閃爍。

來源

2016-03-21 mrberggg

你正在使用這個路由，然後React可能會與密鑰混淆。請參閱[本文]（https://medium.com/front-end-hacking/react-page-transition-animations-9d18c90a9831#.bl1qmuamy）瞭解如何在路由中正確應用cloneElement，children和keys。 – wintvelt

@wintvelt謝謝，我的鍵設置正確，只是被新的div移動到屏幕外的舊div感到困惑。 – mrberggg

@mrberggg我必須執行相同的操作。必須在路線更改上添加頁面轉換。你在哪裏寫過代碼？ –

好吧，原來動畫正在應用，但div是離屏的。哎呀。如果您想讓上一頁有動畫，則需要添加一個position:absolute或類似的東西來保存屏幕上的動畫。

來源

2016-03-21 20:22:34 mrberggg

您能否添加更多關於此問題的信息以及解決方法？ –

@DavidPelayo當然。當新組件進入時，它被放置在舊元素之前，因此在頁面的情況下舊頁面被壓下，只有當新頁面比窗口高度短時纔會看到舊頁面。如果要爲舊頁面添加動畫，必須首先使其可見，例如通過使用'position：absolute;'。然後你可以像平常一樣去動畫。希望有所幫助。 – mrberggg

ReactCSSTransitionGroup讓動畫無法正常工作

回答

相關問題