React CSS Transition Group中的超時值究竟是幹什麼的？

我一直在閱讀React Animations (React CSS Transition Group)的官方文檔，但我對於超時值的使用有點不清楚 - 特別是當我在CSS中設置轉換時。這些值是延遲，動畫的持續時間還是該類在移除之前應用了多長時間？它們與我在CSS中設置的轉換的持續時間有什麼關係？例如，如果我在組件進入/離開時有一個簡單的淡入/淡出，我還會在CSS中設置不透明度和轉換持續時間。那麼這個組件是基於在這個值中傳遞的時間或者我的CSS中設置的持續時間來動畫的？React CSS Transition Group中的超時值究竟是幹什麼的？

這裏是由官方的文檔提供了一個例子：

我的陣營組件

<ReactCSSTransitionGroup 
    transitionName="example" 
    transitionEnterTimeout={500} 
    transitionLeaveTimeout={300} 
> 
    {items} 
</ReactCSSTransitionGroup>

我的.css文件

.example-enter { 
    opacity: 0.01; 
} 

.example-enter.example-enter-active { 
    opacity: 1; 
    transition: opacity 500ms ease-in; 
} 

.example-leave { 
    opacity: 1; 
} 

.example-leave.example-leave-active { 
    opacity: 0.01; 
    transition: opacity 300ms ease-in; 
}

謝謝！

來源

2016-10-21 hidace

從你的鏈接頁面：

你會發現，動畫的持續時間需要在CSS和渲染方法既可以指定;這告訴React何時從元素中移除動畫類，以及 - 如果它正在離開 - 何時從DOM中移除元素。

來源

2016-10-21 16:49:58 narvoxx

見我的答案在這裏：https://stackoverflow.com/a/37206517/3794660

想象一下，你要淡出的元素。持續時間是必需的，因爲React必須等待CSS動畫完成才能添加/刪除類並最終刪除元素。否則，您將無法看到完整的動畫，因爲DOM元素將立即被刪除。

https://github.com/facebook/react/blob/master/src/addons/transitions/ReactCSSTransitionGroupChild.js#L97

如果你看看這個代碼在這裏：https://github.com/facebook/react/blob/v15.3.2/src/addons/transitions/ReactCSSTransitionGroupChild.js#L95你可以看到如何反應用於嘗試並計算超時爲您服務。現在已經被棄用了，你應該明確地告訴React你的CSS動畫的持續時間（大概是因爲猜測有一些主要的開銷/不一致性。）

來源

2016-10-21 20:46:36

React CSS Transition Group中的超時值究竟是幹什麼的？

回答

相關問題