-webkit-transition-property 用于翻译

Question

嗨。
CSS3 中翻译的过渡属性是什么？我目前正在使用 all，但我在 iOS 中遇到了错误，因此我想测试另一个属性。

-webkit-transform: translate(-320px, 0);

 

-webkit-transition: ??? .5 ease-in-out;

使用 iOS 设备查看该错误此处（水平滑动），有一种闪光。

---

更新：对于任何感兴趣的人，我通过 Duopixel 找到了解决该问题的方法：

E {
    -webkit-transition: all .5s ease-in-out;
    -webkit-transform: translate3d(0, 0, 0); // perform an "invisible" translation
}

// Then you can translate with translate3d(), no bug!
document.querySelector('E').webkitTransform = 'translate3d(-320px, 0, 0)'

Answer 1

有很多东西可以转换，根据我的经验，最容易测试的是不透明度。

不过，我以前也遇到过闪烁的问题，尝试一下：

-webkit-transform: translate3d(-320px, 0, 0);

这会启动硬件加速，从而解决问题并使动画变得极其流畅。

Answer 2

您的解决方案将起作用，但是您正在寻找的确切答案是 -webkit-transform。

-webkit-transition: -webkit-transform .5s ease-in-out;