组合大小和翻译过渡会导致 Safari 卡顿

Posted 2023-03-05

【中文标题】组合大小和翻译过渡会导致 Safari 卡顿

【英文标题】：Combining size and translate transitions causes stutter in Safari

【发布时间】：2015-07-31 20:21:31

【问题描述】：

向元素添加过渡并更改宽度和/或高度以及 -webkit-transform:translate3d 时，过渡动画会卡住。它似乎首先对宽度/高度变化进行动画处理，并将其部分平移，然后捕捉到最终平移位置。但是，当返回到原始样式时，动画是平滑的。我只在 Safari（版本 8.0.6 测试）中看到了这一点。这是一些示例 css

#foo
    width:100%;
    height:200px;
    border:1px solid black;
    position:relative; 


#poop
    width:25px;
    height:25px;
    background-color:green;
    position:absolute;
    right:50%;
    top:50%;
    -webkit-transition: all 1s;
    transform:translate3d(0,0,0);
    -webkit-transform:translate3d(0,0,0);


#foo .blah
    transform:translate3d(-100%,-100%,0);
    -webkit-transform:translate3d(-100%,-100%,0);
    width:100px;
    height:100px; 

还有一个 jsfiddle http://jsfiddle.net/84w4hj99/4/

为了演示，我正在使用 jquery 在单击按钮时向元素添加一个类，但在使用 :hover 时首先注意到它以获得相同的效果。我在这里遗漏了什么，还是只是 Safari 的问题，有人知道解决方法吗？谢谢。

【问题讨论】：

我遇到了同样的问题。就像浏览器在过渡完成之前不知道宽度/高度的变化。

【参考方案1】：

尝试使用transform: scale()，而不是更改宽度和高度。在这种情况下，您将顺利过渡。但是，您必须调整 top 和 right 或 transform: translate3D() 属性才能将对象定位回正确的位置。应该很容易。

见http://jsfiddle.net/y3xqak1z/