我有一个内联svg和文本的链接.我想要动画：悬停(或添加.active类),但在Chrome上,转换不会同时发生.在Firefox上,一切都很完美. 这是演示： [DEMO](http:/
... . . 我有一个内联svg和文本的链接.我想要动画：悬停(或添加.active类),但在Chrome上,转换不会同时发生.在Firefox上,一切都很完美.
这是演示：
[DEMO](http://codepen.io/anon/pen/QNvgvy)
是否有人知道这个问题的解决方案？
谢谢！
解决方法
. 我想这里发生的是FF和Chrome之间的差异,就像在过渡阶段传播继承的css一样. FF会立即执行此操作,而Chrome仅在父项转换完成后才将新样式值应用于子元素.
看一下这个例子：https://jsbin.com/koruyeludi/1/edit?html,output并注意悬停时在控制台中打印的颜色值.
示例有2个跨度,.child嵌套在.parent中.两者都有适用于他们的过渡.将鼠标悬停在父级范围上时,颜色会逐渐变化.在父节点上完成转换后,将在子节点上更改颜色.而且由于它已经过渡,现在它发挥作用.
所以在你的例子中你有{{transition：all 1s; }.父< a>将在[0s-1s]间隔期间进行颜色转换. <跨度>和< svg>将在[1s-2s]期间改变颜色.并且< path>将在[2s-3s]进行更改.为避免这种情况,请应用转换：仅一次 – 在root< a>上元件).
. . .. ...