为什么 iOS Sfari 会一个接一个地运行此 CSS 过渡的多个转换？

Question

这在Chrome中完美运行并且可以顺利地更改图标，但是在iOS Safari(可能还有桌面Safari)中，它会按顺序执行它们，等到另一个完成之后再执行下一个：

野生动物园过渡：

1. 旋转直到完成
2. 是否翻译 (x，y)

这使得动画非常糟糕。在Chrome中，这一切都是同时完成的。

有没有办法在 Safari 中强制这样做？

https://jsfiddle.net/6nju07s8/

.HTML：

<div class="error" id="outer">
<div class="line left">
</div>
<div class="line right">
</div>
</div>

.CSS：

#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;
}

JS(可选)：

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

Answer 1

我看到Safari桌面有问题。我不确定这是否与您所说的相同问题，但是当对transform和width问题进行transition时，就会出现问题。

我认为问题与 Safari 在width更改后重新定位元素有关。在其他浏览器中，它似乎流畅地发生，在Safari中它是"生涩的"。

您可以在此处查看该行为的简化示例。不幸的是，我不知道为什么会发生这种情况，但我们可以通过调整我们的方法来实现同样的效果。这就是我的建议。

---

我没有更改width值(以避免在 Safari 中出现问题)，而是使用了scaleX(X)属性。这会给你一个非常相似的视觉效果(调整线条的"高度")，不应该引入问题。您还必须编辑top值以在缩放元素后重新定位元素(或调整translate(-50%,Y)值;我更喜欢使用top)。

这是一个演示。我还对 QoL 标记进行了一些更改，如果您想在生产中使用它，则需要为所有内容添加前缀。

$('.box').click(function(){
	$(this).toggleClass('info');
});

.parent {
width: 100%;
height: 100vh;
}
.box {
width: 50px;
height: 50px;
background: lightblue;
}
.va {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
margin: 0 auto;
}
.line {
display: inline-block;
background: white;
width: 2.5rem;
height: .375rem;
position: absolute;
top: 50%;
left: 50%;
transition: all 250ms;
transform: translate(-50%,-50%) rotate(45deg);
}
.line.right {
background: red;
transform: translate(-50%,-50%) rotate(-45deg);
}
.info .line.left {
top: 20%;
transform: translate(-50%,-50%) rotate(90deg) scaleX(.15);
}
.info .line.right {
top: 60%;
transform: translate(-50%,-50%) rotate(90deg) scaleX(.65);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent error">
<div class="box va">
<div class="line left"></div>
<div class="line right"></div>
</div>
</div>