javascript - 为什么 iOS Sfari 会一个接一个地运行这个 CSS transition 的多重转换？

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 桌面有问题。我不确定这是否是您所说的同一个问题，但是当在 transform 和 width 上进行 transition 时会出现问题。

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

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

---

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

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>