Javascript 为什么iOS Sfari运行这个CSS转换'；是一个接一个的多重变换吗？

这在Chrome中非常有效，可以顺利地更改图标，但在iOS Safari（可能还有桌面Safari）中，它会按顺序进行操作，等待其他操作完成后再进行下一步操作：

狩猎过渡：

旋转是否完成

是否转换（x，y）

这使得动画效果非常差。在Chrome中，所有这些都是同时完成的

有没有办法在狩猎中强制这样做

HTML:

JS（可选）：

---

我发现Safari桌面有问题。我不确定这是否是您所说的同一个问题，但在

transform

上进行

transition

和

width

时会出现问题

我认为这个问题与Safari在

width

更改后重新定位元素有关。在另一个浏览器中，这似乎是流畅的，而在Safari中则是“急促的”

你可以看到。不幸的是，我不知道为什么会发生这种情况，但我们可以通过调整我们的方法来达到同样的效果。这就是我的建议

---

我没有更改

width

值（为了避免Safari中的问题），而是使用了

scaleX（X）

属性。这将给你一个非常相似的视觉效果（调整线条的“高度”），不应该带来问题。您还必须编辑

top

值，以便在缩放元素后重新定位元素（或调整

translate（-50%，Y）

值；我更喜欢使用

top

）

我还做了一些QoL标记更改，如果您想在生产中使用它，您需要在所有内容前面加前缀

$（'.box'）。单击（函数（）{
$（this.toggleClass（'info'）；
});
.parent{
宽度：100%；
高度：100vh；
}
.盒子{
宽度：50px；
高度：50px；
背景：浅蓝色；
}
弗吉尼亚州{
位置：相对位置；
最高：50%；
-webkit转换：translateY（-50%）；
转化：translateY（-50%）；
保证金：0自动；
}
.线路{
显示：内联块；
背景：白色；
宽度：2.5雷姆；
高度：.375雷姆；
位置：绝对位置；
最高：50%；
左：50%；
过渡：所有250ms；
变换：平移（-50%，-50%）旋转（45度）；
}
.行，对{
背景：红色；
变换：平移（-50%，-50%）旋转（-45度）；
}
.info.line.左{
最高：20%；
变换：平移（-50%，-50%）旋转（90度）scaleX（.15）；
}
.info.line.对{
最高：60%；
变换：平移（-50%，-50%）旋转（90度）scaleX（.65）；
}

我无法在safari上进行测试，但如果你能转换变换、平移、旋转等，也许你会更幸运。。。到矩阵。你可以在网上找到很好的工具。你说得对！这似乎是宽度随变换而变化，而不是多重变换。您的解决方案在safari上运行良好。
<div class="error" id="outer">
<div class="line left">
</div>
<div class="line right">

</div>

</div>

#outer,body,html
{
  width: 100%;
  height: 100%
}
.line {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2.5rem;
    height: .375rem;
    background-color: red;
    -webkit-transform: translate(-50%,-50%) rotate(45deg);
    -ms-transform: translate(-50%,-50%) rotate(45deg);
    transform: translate(-50%,-50%) rotate(45deg);
    -webkit-transition: transform 250ms;
    transition: transform 250ms;
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
}

.line.right {
    -webkit-transform: translate(-50%,-50%) rotate(-45deg);
    -ms-transform: translate(-50%,-50%) rotate(-45deg);
    transform: translate(-50%,-50%) rotate(-45deg);
}

.info .line {
    width: .375rem;
    height: .375rem;
    -webkit-transform: translate(-50%,-50%) translateY(-1.0625rem);
    -ms-transform: translate(-50%,-50%) translateY(-1.0625rem);
    transform: translate(-50%,-50%) translateY(-1.0625rem);
    background-color: blue;
}

.info .line.right {
    width: 1.75rem;
    height: .375rem;
    -webkit-transform: translate(-50%,-50%) translateY(.4375rem) rotate(90deg);
    -ms-transform: translate(-50%,-50%) translateY(.4375rem) rotate(90deg);
    transform: translate(-50%,-50%) translateY(.4375rem) rotate(90deg);
    background-color: blue;
}

var outer = document.querySelector( "#outer" );

outer.onclick = function()
{
  if ( outer.className === "info" ) { outer.className = "error"; }
  else outer.className = "info";
}