jquery - Safari 不采用添加类的过渡属性

Question

Fiddle for testing (click the black container)

我有一个动画，我正在使用一系列 div 进行编码，我要从中添加和删除类。动画已完成，并且可以在 Firefox 和 Chrome 中正常运行。但是，我在 Safari 中遇到了一个问题:对象没有从新添加的类中获取 transition 属性，并且只使用它初始的 transition 属性类。

例如:

div 既有.circle 类，也有.circle.grow 类，当我想把圆div 变大时添加。你可以在grow类中看到，div接受了.grow的transform属性，它的比例返回到(1,1)。但是，.grow 中包含的 transition 不会添加会转换比例的 transition，而是坚持存在于中的初始 transition 属性.circle，不转换 transform 属性。因此，当添加 .grow 时，圆圈会跳到新的比例。

如前所述，它在 Chrome 和 Safari 中运行良好，具有 .grow 的过渡属性。有谁知道为什么会发生这种情况？

编辑 1:经过更多测试后，我尝试从初始 circle 类中删除 transition 属性。但是，在添加 circle.grow 类时，transition 属性仍然被划掉，并且没有应用任何属性，尽管没有任何东西可以恢复。也许在 .circle.grow 中如何定义 transition 属性对 Safari 来说是无效的？据推测，我可以将 transition 属性放回基础 .circle 类中，并且它会被 .cricle.grow 覆盖，如果它是transition 有效。但它不是(？)

SO:代码有什么问题:

transition: transform 0.3s, width 0.3s;
-moz-transition: transform 0.3s, width 0.3s;
-webkit-transition: transform 0.3s, width 0.3s;

那会让 Safari 无法读取或执行它？

Answer 1

啊!我已经解决了!考虑到它在 Chrome/FF 中以其他方式工作，这是一个奇怪的问题，但应该是显而易见的。

解决方案很简单:Safari 将只执行 -webkit- 转换。但是当它尝试时，其中之一是 transform 属性，Safari 不接受它。我需要做的就是为每个 transform 添加供应商前缀到它们各自的供应商前缀 transition 中。像这样:

transition: transform 0.3s, width 0.3s;
-moz-transition: -moz-transform 0.3s, width 0.3s;
-webkit-transition: -webkit-transform 0.3s, width 0.3s;