-webkit-transition-property 用于翻译

Posted 2023-03-06

【中文标题】-webkit-transition-property 用于翻译

【英文标题】：-webkit-transition-property for translation

【发布时间】：2011-06-01 23:42:30

【问题描述】：

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

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

 

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

用iOS设备here查看bug（水平滑动），有一种闪光。

---

更新：致所有感兴趣的人，感谢 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)'

【参考方案1】：

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

不过我之前也遇到过闪退的问题，试试：

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

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

【讨论】：

我在第一次滑动时仍然有闪光，然后它消失了。我想我必须处理它。还是谢谢！

试试 -webkit-backface-visibility: hidden;相关：***.com/questions/2946748/…

【参考方案2】：

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

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

【讨论】：

如果它对任何人都不起作用，请在 '.5' 之后添加一个 's' 来制作 '.5s'