Safari不会从添加的类中获取过渡属性

Question

Fiddle for testing (click the black container)

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

例如：

div包含.circle类和.circle.grow类，当我想要使圆形div更大时，它会被添加。你可以在成长类中看到，div已经采用了transform .grow属性，其中它的比例被返回到（1,1）。但是，transition中包含的.grow会转换比例，但不会添加transition，而是使用.circle中存在的初始.grow属性，但不转换转换属性。因此，当添加.grow时，圈子会跳转到新的比例。

如上所述，它在Chrome和Safari中完美运行，具有transition的过渡属性。有谁知道为什么会发生这种情况？

编辑1：经过多次测试后，我尝试从初始圈级中删除circle.grow属性。但是，在添加transition类时，transition属性仍然被删除，并且没有应用任何属性，尽管没有任何内容可以恢复。也许如何在.circle.grow中定义transition属性对Safari无效？据推测，我可以将.circle属性放回基础.cricle.grow类中，如果它transition有效，它将被transition: transform 0.3s, width 0.3s; -moz-transition: transform 0.3s, width 0.3s; -webkit-transition: transform 0.3s, width 0.3s; 覆盖。但它不是（？）

SO：代码出了什么问题：

{{1}}

是否使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);
}