无法设置 CSS3 过渡以允许一秒高亮答案

【问题标题】：Can't set up CSS3 transition to allow one-second highlight无法设置 CSS3 过渡以允许一秒高亮
【发布时间】：2011-08-23 21:03:50
【问题描述】：

我正在尝试放弃基于 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>

【问题讨论】：

标签： css transition highlight

【解决方案1】：

需要超时切换类：

function flash() {
    document.getElementById("samp").className = "highlight";

    setTimeout(function(){
        document.getElementById("samp").className = "selected";
    }, 10);
}

此外，这是题外话，但一个好的做法是避免冗余 DOM 查询和缓存变量中的元素：

function flash() {
    var samp = document.getElementById('samp');

    samp.className = "highlight";

    setTimeout(function(){
        samp.className = "selected";
    }, 10);
}

【讨论】：

不起作用。像我的例子一样直接从白色变为蓝色。此外，没有理由需要 setTimeout。
如果您尝试在 .highlight 而不是 .selected 上定义过渡？

【解决方案2】：

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

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

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

【讨论】：