css3转换延迟如果动画svg填充和颜色同时在chrome中的bug工作在FF中

Question

我有一个内联svg和文本的链接.我想要动画:悬停(或添加.active类),但在Chrome上,转换不会同时发生.在Firefox上,一切都很完美.这是演示:

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

是否有人知道这个问题的解决方案？谢谢!

Answer 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>元素上.