css - 无法设置 CSS3 过渡以允许一秒钟突出显示

Question

我正在尝试放弃基于 setTimeout 的 JavaScript，转而使用 CSS 过渡来实现一秒钟的高亮显示。我不想立即更改背景颜色或什至在两种背景颜色之间渐变，而是先立即切换为黄色，然后渐变为正确的颜色。

我认为它应该工作的方式是我将类设置为黄色背景，然后将其更改为具有过渡属性和新颜色的类。这只是淡化到最终颜色，而不是从黄色开始。我不认为我可以将过渡附加到元素而不考虑类，否则两个类更改将重叠并同时运行它们的动画。

很明显，我需要以不同的方式构建事物才能完成此任务。当附加到添加和删除的类时，我一定没有掌握转换实际发生的时间的基础知识。

<style>
.highlight  { background-color: yellow; }
.selected   { background-color: black; -moz-transition: background-color 2s linear; }
</style>

<div id="samp" onclick="flash();">SAMPLE</div>

<script>
function flash() {
    document.getElementById("samp").className = "highlight";
    document.getElementById("samp").className = "selected";
}
</script>

Answer 1

在咨询 IRC 后，确定这是浏览器等待脚本 block 完成后再尝试重绘/重绘的根本原因。就好像从未应用过 highlight 类一样。出于这个原因，如果增加超时，Lea 的上述解决方案实际上确实有效。有效的确切超时必须取决于重绘间隔。

我搜索了强制重绘的方法并遇到了 Opera blog post warning against measuring as it causes a repaint .只需在设置 className 的两行之间插入 var x = document.getElementById("samp").offsetWidth; 即可根据需要从黄色开始过渡。

我觉得有趣的是，Webkit 和 Gecko 所做的优化——等待重绘直到脚本 block 完成——在所采取的操作大多是无状态的(如 CSS)时是合理的。也就是说，无论进行了多少更改，浏览器都可以丢弃所有以前的样式并正确地应用最后一个。然而，随着过渡，CSS 变得有状态，这种优化实际上产生了与关闭时截然不同的结果。