-webkit-transition-property for translation

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.

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

Answer 2

你可以转换很多东西,在我的经验中最容易测试的是不透明度.

但是,我之前遇到过闪烁问题,请尝试:

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

这将启动硬件加速,从而解决问题并使动画非常流畅.