我正在嘗試實現與 jQuery 的fadeIn()功能相同的效果，其中顯示一個元素，然后它的不透明度從 0 到 1 進行動畫處理。我需要以編程方式（不使用 jQuery）進行操作，并且我需要該元素能夠淡出 ( display:none) 然后淡入。理想的解決方案將使用 CSS 過渡來利用硬件加速——我可以通過監聽transitionend事件使元素淡出并取得巨大成功。然而，事實證明，淡入淡出是一個挑戰，因為以下代碼無法按預期工作：fader.style.transition = 'opacity 1s';const fadeIn = () => {  fader.style.display = 'block';  fader.style.opacity = 1;};當fadeIn()被調用時，元素只是簡單地重新插入，而不是平滑地動畫。我有一個codePen，我一直在修補它來說明問題。我的理論是過渡無法在不在 DOM 中的元素上執行，因為我可以通過設置height:0而不是display:none. 也許在我設置fader.style.display = 'block';和實際更新 DOM之間存在延遲，在此期間我無法轉換？關于這個想法：我似乎也可以通過延遲不透明度變化來使動畫工作setTimeout(() => {fader.style.opacity = 1}, 20}。然而，這似乎會產生一種競爭條件，因為隨著超時持續時間接近 0，動畫的工作越來越不可靠。請注意，我不想像這個問題visibility的解決方案那樣切換屬性，因為這并不能有效地從 DOM 中刪除元素。將高度/寬度更改為 0 是一個更可行的選擇，但由于元素的高度和寬度未知，因此需要在淡出之前捕獲這些值的額外步驟，以便在淡入時可以重新應用它們。如果應用程序的不同部分嘗試更改這些值（例如媒體查詢，并且用戶在元素隱藏時旋轉他們的設備），這似乎很脆弱