使用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來說，嘗試猜測持續時間可能太複雜或不可靠（就像他們在最新版本中實現的那樣）。