javascript - CSS 淡入淡出在 Chrome 中不起作用

Question

我用 javascript 写了这个函数:

function unhide(el, dur = 300, display = "block") {
    el.style.display = display;
    el.style.transitionDuration = dur + "ms";
    el.style.opacity = 1;
}

出于某种原因，这在 Chrome 中不起作用。

我记得有过这样的问题，因为浏览器没有自动应用 Javascript 编写的 CSS。

因此，我尝试在显示更改后放置一个断点:

function unhide(el, dur = 300, display = "block") {
    el.style.display = display;
●   el.style.transitionDuration = dur + "ms";
    el.style.opacity = 1;
}

这解决了问题。

同样的问题出现在 FireFox 中，但不会出现在 Microsoft edge 中。

我该如何解决这个问题？

有没有办法强制浏览器应用显示，然后应用不透明度？

---

我刚刚考虑过使用 setTimeout(用于设置不透明度，因为再次显示不是自动应用)，但是，这看起来很乱/低效的破解。

Answer 1

使用 requestAnimationFrame 的最小实现

function unhide(el, dur = 1000, display = "block") {
    console.log("opacity when display none: ", getComputedStyle(mrHyde, null).opacity);
    el.style.display = display;
    console.log("opacity when display block: ", getComputedStyle(mrHyde, null).opacity)
    el.style.transitionDuration = dur + "ms";
    requestAnimationFrame(() => el.style.opacity = 1);
}

const mrHyde = document.getElementById("unhideMe");
unhide(mrHyde);

#unhideMe {
  display: none;
  opacity: 0;
}

<div id="unhideMe">Mr. Hyde</div>

编辑 我将 setTimeout 替换为 requestAnimationFrame。最终结果是一样的，但我觉得 requestAnimationFrame 更适合这个目的。

编辑 2 此行为实际上已被报告为 bug .该线程的最后一条评论提出了一个我也在推测的假设。当元素处于 display: none 时，浏览器可能会“丢弃”opacity 的数值。这意味着设置 opacity: 1 不会触发 css 转换，因为转换仅适用于明确定义的样式属性值。 在下一个事件循环中，浏览器将为该元素定义一个 opacity 值，因为它现在位于 display: block 中。

我通过记录元素在 display: none 和切换到 display: block 时计算出的样式值来证明这个假设>。这两个值实际上都是定义明确的数字 0，因此这与假设相悖。

附注: http://caniuse.com/#feat=requestanimationframe 截至 2017 年，requestAnimationFrame 的覆盖范围似乎相当可接受，包括 IE > 9 版本。