javascript - 为什么 iOS Safari 会一个接一个地运行此 CSS 转换多个转换？

Question

这在 Chrome 中完美运行，并且可以顺利地更改图标，但在 iOS Safari(可能还有桌面版 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 桌面版存在问题。我不确定这是否是您所说的同一问题，但是当有 transition 时上transform和width出现问题。

我认为这个问题与 Safari 在 width 之后重新定位元素有关。改变。在其他浏览器中，它似乎流畅地发生，而在 Safari 中，它是“不稳定的”。

您可以看到a simplified example of that behaviour here 。不幸的是，我不知道为什么会发生这种情况，但我们可以通过调整我们的方法来达到相同的效果。这就是我的建议。

---

而不是更改 width值(为了避免 Safari 中的问题)，我使用了 scaleX(X)属性(property)。这将为您提供非常相似的视觉效果(调整线条的“高度”)，并且不会引入问题。您还必须编辑您的 top缩放元素后重新定位元素的值(或调整 translate(-50%,Y) 值；我更喜欢使用 top )。

<强> Here's a demo .我还进行了一些 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>