我有内联svg和文本的链接。我想要动画：悬停（或添加.active类），但在Chrome上，转换不会同时发生。在Firefox上，一切都很完美。 这是演示：
[DEMO](http://codepen.io/anon/pen/QNvgvy)
是否有人知道这个问题的解决方案？ 谢谢！
答案 0 :(得分：5)
我想这里发生的是FF和Chrome之间的差异，就像在过渡阶段传播继承的css一样。 FF会立即执行此操作，而Chrome仅在父项转换完成后才将新样式值应用于子元素。
请看一下这个示例：https://jsbin.com/koruyeludi/1/edit?html,css,js,console,output并密切注意悬停时在控制台中打印的颜色值。
示例有2个跨度，.child嵌套在.parent中。两者都有适用于他们的过渡。将鼠标悬停在父级范围上时，颜色会逐渐变化。在父节点上完成转换后，将在子节点上更改颜色。而且由于它已经过渡，现在也开始发挥作用。
因此，在您的示例中，您有* { transition: all 1s; }。在[0s-1s]间隔期间，父<a>将处于颜色过渡状态。在[1s-2s]期间，<span>和<svg>会改变颜色。并且<path>将在[2s-3s]中进行更改。
为避免这种情况，请仅在transition:元素的根<a>上使用do.call(rbind, lapply(split(a, a$UID), function(x){
x <- x[order(as.Date(as.character(x$Date.of.Txn), format='%d-%m-%Y'), decreasing=TRUE),]
x$Datesorted <- c(as.character(x$Date.of.Txn[2:nrow(x)]),'0')
x}))
UID Date.of.Txn Datesorted
1.1 1 09-11-2016 25-10-2016
1.2 1 25-10-2016 30-08-2016
1.3 1 30-08-2016 0
2.4 2 30-08-2016 02-06-2016
2.5 2 02-06-2016 0
3.6 3 18-04-2016 31-01-2016
3.7 3 31-01-2016 0
4.8 4 03-11-2015 06-08-2015
4.9 4 06-08-2015 0
5.10 5 20-05-2015 08-05-2015
5.11 5 08-05-2015 0
。