Safari 不采用添加的过渡属性 class

Question

Fiddle for testing (click the black container)

我有一个动画，我正在使用一系列 div 进行编码，我要从中添加和删除 class。动画已完成，并在 Firefox 和 Chrome 中正常运行。但是，我在 Safari 中遇到了问题：对象没有采用新添加的 class 中的 transition 属性，并且仅使用其初始 transition 中的属性 class.

例如：

div既有.circleclass，也有.circle.growclass，是我想做圆的时候加的div 更大。你可以看到在class的增长中，div已经取代了.grow的transform属性，其中它的比例返回到（1,1 ).但是，.grow 中包含的 transition 不会添加会转换比例的 transition，而是坚持 .circle 中出现的初始 transition 属性，它不会转换转换属性。结果，当添加 .grow 时，圆只是跳到新的比例。

如前所述，它在 Chrome 和 Safari 中运行良好，承担 .grow 的转换属性。有谁知道为什么会这样？

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

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- 转换。但是当它尝试时，其中之一是转换属性，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;

Answer 2

看起来是语法问题。

CSS:

.circle.grow {
    transition: transform 0.3s, width 0.3s;
    -moz-transition: transform 0.3s, width 0.3s;
    -webkit-transition: -webkit-transform 0.3s, width 0.3s;
    transform: translate(-50%,-50%) scale(1,1);
    -moz-transform: translate(-50%,-50%) scale(1,1);
    -webkit-transform: translate(-50%,-50%) scale(1,1);
}

Safari 不采用添加的过渡属性 class

Safari not taking on the transition properties from added class

html

css

safari

jquery