javascript - 不用jQuery淡入(fadeIn)——CSS过渡不透明度和显示

Question

我正在尝试实现与 jQuery 的 fadeIn() 函数相同的效果，其中显示一个元素，然后它的不透明度从 0 变为 1。我需要以编程方式进行( WITHOUT jQuery)，我需要元素能够淡出 (display:none) 然后淡入。

理想的解决方案将使用 CSS 转换来利用硬件加速 - 我可以通过监听 transitionend 事件使元素成功淡出。然而，淡入被证明是一个挑战，因为以下代码未按预期工作:

fader.style.transition = 'opacity 1s';

const fadeIn = () => {
  fader.style.display = 'block';
  fader.style.opacity = 1;
};

当 fadeIn() 被调用时，元素只是快速返回，而不是平滑的动画。我有一个 codePen that I've been tinkering with来说明问题。

我的理论是过渡无法在不在 DOM 中的元素上执行，因为我可以通过设置 height:0 而不是 display:none 来使动画工作。也许在我设置 fader.style.display = 'block'; 和 DOM 实际更新之间存在延迟，在此期间我无法转换？

关于这个想法:我似乎也可以通过使用 setTimeout(() => {fader.style.opacity = 1}, 20} 延迟不透明度变化来让动画工作. 这似乎造成了一种竞争条件，但是因为随着超时持续时间越来越接近 0，动画工作的可靠性越来越差。

请注意，我不想像 this question 的解决方案那样切换 visibility 属性，因为这并没有有效地从 DOM 中删除元素。

将高度/宽度更改为 0 是一个更可行的选择，但由于元素的高度和宽度未知，因此需要额外的步骤在淡出之前捕获这些值，以便在淡出时重新应用它们淡入。如果应用程序的不同部分试图更改这些值(例如媒体查询，并且用户在隐藏元素时旋转他们的设备)，这看起来很脆弱

Answer 1

以下代码应该有效地替换 jQuery 的 fadeOut() 和 fadeIn() 函数(非常感谢@Kyle 提供的线索!)。

const fadeIn = (el, ms, callback) => {
  ms = ms || 400;
  const finishFadeIn = () => {
    el.removeEventListener('transitionend', finishFadeIn);
    callback && callback();
  };
  el.style.transition = 'opacity 0s';
  el.style.display = '';
  el.style.opacity = 0;
  requestAnimationFrame(() => {
    requestAnimationFrame(() => {
      el.addEventListener('transitionend', finishFadeIn);
      el.style.transition = `opacity ${ms/1000}s`;
      el.style.opacity = 1
    });
  });
};

const fadeOut = (el, ms, callback) => {
  ms = ms || 400;
  const finishFadeOut = () => {
    el.style.display = 'none';
    el.removeEventListener('transitionend', finishFadeOut);
    callback && callback();
  };
  el.style.transition = 'opacity 0s';
  el.style.opacity = 1;
  requestAnimationFrame(() => {
    requestAnimationFrame(() => {
      el.style.transition = `opacity ${ms/1000}s`;
      el.addEventListener('transitionend', finishFadeOut);
      el.style.opacity = 0;
    });
  });
};

在深入研究 rAF (requestAnimationFrame) 并观看此 video on the event loop 后，这一点变得非常清楚.就在 21:00 左右，我突然想到为什么 rAF 需要嵌套在另一个 rAF 中。

这是 working example on Codepen .

如果您发现任何 Unresolved 边缘情况，请发表评论 :)