Fade In without jQuery (fadeIn) - CSS 过渡不透明度和显示

Question

我正在尝试实现与 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 是一个更可行的选择，但由于元素的高度和宽度未知，因此需要在淡出之前捕获这些值的额外步骤，以便在淡入时可以重新应用它们。如果应用程序的不同部分尝试更改这些值（例如媒体查询，并且用户在元素隐藏时旋转他们的设备），这似乎很脆弱