css3 过渡延迟，如果动画 svg 填充和颜色同时 chrome 中的错误在 FF 中起作用

Posted 2023-03-06

【中文标题】css3 过渡延迟，如果动画 svg 填充和颜色同时 chrome 中的错误在 FF 中起作用

【英文标题】：css3 Transition delay if animate svg fill and color at the same time bug in chrome works in FF

【发布时间】：2016-07-10 22:26:03

【问题描述】：

我有一个带有内联 svg 和文本的链接。我想在 :hover 上制作动画（或添加一个 .active 类），但在 Chrome 上，过渡不会同时发生。在 Firefox 上一切正常。 这是演示：

[DEMO](http://codepen.io/anon/pen/QNvgvy)

有人知道这个问题的解决方案吗？ 谢谢！

【参考方案1】：

我猜这里发生的事情是 FF 和 Chrome 之间的区别在于继承的 css 在过渡阶段传播的方式。 FF 会立即执行此操作，而 Chrome 仅在父元素上的转换完成时才会将新样式值应用于子元素。

看看这个例子：https://jsbin.com/koruyeludi/1/edit?html,css,js,console,output，当你悬停时，留意控制台中打印的颜色值。

示例有 2 个跨度，.child 嵌套在 .parent 中。两者都应用了过渡。当您将鼠标悬停在父跨度上时，颜色会逐渐改变。一旦在父节点上完成转换，子节点上的颜色就会改变。而且由于它也有过渡，它现在开始发挥作用。

所以在你的例子中你有* transition: all 1s; 。父 <a> 将在 [0s-1s] 间隔期间进行颜色转换。 <span> 和 <svg> 将在 [1s-2s] 期间改变它们的颜色。 <path> 将在 [2s-3s] 中进行更改。 为避免这种情况，请仅应用一次 transition: - 在根 <a> 元素上）。

【讨论】：

这会导致相同的延迟，但仅在 1 秒内：.33s、.33s、.33s

在 a 标签上应用你的过渡，而不是在每个标签上。 atransition:0.2s all; a *:not(svg):not(path)transition:0.2s all;