为什么iOS Sfari会一个接一个地运行这个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浏览器桌面的问题。我不确定这是否与您所说的问题相同，但是当transform和width上出现transition问题时。

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

你可以看到a simplified example of that behaviour here。不幸的是，我不知道为什么正在发生，但我们可以通过调整我们的方法来实现相同的效果。这是我的建议。

---

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

Here's a demo。我也做了一些QoL标记更改，如果您想在生产中使用它，则需要在所有内容前加前缀。

$('.box').click(function(){ 
 
\t $(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>