Question

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

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

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

查看iOS设备here的错误（水平滑动），有一种闪光灯。

更新：对于任何感兴趣的人，我找到了一种解决方法，感谢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。

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

Answer 2

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

但是，我之前遇到过闪烁问题，请尝试：

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

这将启动硬件加速，解决问题并使动画非常流畅。

-webkit-transition-property for translation

2 个答案: