为啥这个 CSS 转换队列？

Posted 2023-03-05

【中文标题】为啥这个 CSS 转换队列？

【英文标题】：Why does this CSS transition queue?为什么这个 CSS 转换队列？

【发布时间】：2015-07-17 20:34:18

【问题描述】：

当我将鼠标悬停在div 上时，div 内容上会发生颜色变化之前颜色变化会影响span。为什么会这样，我怎样才能让两个动画同时发生？ * transition: ... 的原因是，网站的每个元素都默认设置动画，以防其属性发生变化。

http://jsfiddle.net/wf63jquz/

html：

<div>
    <span>Hello</span>
    Hola
</div>

CSS：

*,
*:before,
*:after

    -moz-transition: 2s;
    -o-transition: 2s;
    -webkit-transition: 2s;
    transition: 2s;


div 
    color: red;


div:hover

    color: green;

*编辑*

哎呀，没想到要检查其他浏览器。新问题：为什么 Chrome 做错了，我该如何为 Chrome 解决它？我想这可能是一般的 webkit 问题，但我无法快速访问 Safari 进行检查。

【问题讨论】：

在什么浏览器中？在这里工作正常（Win7 + FF31）

我真的不明白你在这里问什么，只有一个动画？

add div:hover > span 到 div:hover 块，使它们在悬停时同时改变颜色，但它们仍然会在不同的时间淡出，因为你的 span 标签实际上有两个转换应用到它。

刚刚更新了我的问题，原来这可能是 Chrome (webkit?) 唯一的问题。

这样的事情就是为什么这么多年后Transitions仍然处于草案中的原因。需要考虑的边缘情况太多。

【参考方案1】：

因为 * .. 如果你使用下面的代码，它会给你想要的结果：

div:before,div:after
-moz-transition: 2s;
-o-transition: 2s;
-webkit-transition: 2s;
transition: 2s;

【参考方案2】：

试试这个

*,
*:before,
*:after

    -moz-transition: 2s;
    -o-transition: 2s;
    -webkit-transition: 2s;
    transition: 2s;


div, span 
    color: red;


div:hover, span:hover

    color: green;

<div>
    <span>Hello</span>
    Hola
</div>

【讨论】：

这实际上相当不错，尽管它具有能够悬停span 并看到它动画但div 保持红色的不良效果（在Chrome 中）。我将其更改为将原来的span 设置为红色（请参阅jsfiddle.net/wf63jquz/6）效果更好，除非您在两个单词之间滑动鼠标，否则动画会彻底混乱。

【参考方案3】：

这似乎是 Chrome 的一个问题，因为它首先对所有标准 HTML 元素进行动画处理，然后再处理其余内容。

为了解决这个问题，似乎将标签外的内容包装在一个标签内，这是可行的。所以你的 HTML 将是：

<div>
    <span>Hello</span>
    <span>Hola</span>
</div>

DEMO

正如@Boltclock 所说，这些“怪癖”归结于过渡仍在草稿中这一事实，因为似乎没有人将它们做得非常完美还 :)

【讨论】：

这看起来对时间做了一些非常奇怪的事情。我将它延长到 5 秒（参见 jsfiddle.net/wf63jquz/9），它似乎要等待很长时间，然后在更短的时间内过渡。

@Chris 这看起来像是在堆叠动画（每个层次结构），所以它似乎等待了 10 秒（div 转换为 5 秒，span 为 5 秒）。这里发生了一些奇怪的事情。我的建议是不要将* 与transition 结合使用！