當我向影片添加延遲時，這個基于 React 鉤子的簡單影片包裝器無法正常作業。
在此處查看沙箱
該代碼充當一個合理的簡單影片包裝器，沒有任何 css 影片延遲，例如
animation: `${show ? "fadeIn" : "fadeOut"} 1s`
但是當我向 css 影片添加延遲時，它會在沒有任何影片的情況下渲染 div，然后在延遲后再次渲染影片。
例如
return (
render && (
<div
style={{
animation: `${show ? "fadeIn" : "fadeOut"} 1s 1s`,
position: "relative"
}}
onAnimationEnd={onAnimationEnd}
>
{children}
</div>
)
);
有沒有辦法修改它以延遲正確地暫停渲染孩子？
uj5u.com熱心網友回復：
您必須為影片指定填充模式以使其按預期作業：
所以只需both為影片添加屬性：
animation: ${show ? "fadeIn" : "fadeOut"} 1s 1s both`,`
CSS 影片不會在播放第一個關鍵幀之前或播放最后一個關鍵幀之后影響元素。影片填充模式屬性可以覆寫此行為。animation-fill-mode 屬性指定影片未播放時（開始之前、結束之后或兩者）時目標元素的樣式。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/396977.html
上一篇：我可以更新道具的狀態嗎