我正在开发一个使用流行的侧边栏交互模式的小型网络应用程序。当使用 CSS3 动画将侧边栏转换为 View 时,动画会滚出 View ,但会停在 Android native 浏览器中的正确位置。
动画代码很简单:
#wrapper > #off-canvas {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
#wrapper > #off-canvas.off {
-webkit-transform: translate(80%, 0);
-moz-transform: translate(80%, 0);
-ms-transform: translate(80%, 0);
-o-transform: translate(80%, 0);
transform: translate(80%, 0);
}
您可以在我制作的 JS-Fiddle 中看到行为。代码有点乱,但行为显然有问题。 (当然你需要一个 Android 设备才能重现错误)
- 为“左”属性设置动画时,一切正常。
- 当使用带有 px 值的
transform:translate
时,一切正常。
有没有其他人遇到过这方面的问题并找到了解决方法?
我想使用一种支持硬件加速的方法来提高应用程序的性能。
最佳答案
你是对的。 native android 浏览器(不是 Chrome)过度滚动。它不喜欢 translate
属性。我可以通过使用 margin-left
来修复它。
#wrapper > #off-canvas.off {
margin-left:80%;
}
关于javascript - 在 Android native 浏览器 (4.x) 上动画翻译百分比,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16772541/