jquery - 移动 GPU 加速 slideToggle 功能

Question

我正在使用 HTML 和 CSS 为移动应用程序开发界面。该应用程序使用了很多表单，我想使用 jQuery slideToggle 功能来显示和隐藏不常用的元素。

jQuery 动画在移动设备上运行很差，所以经过一些研究似乎只有 transform: translate3d() in CSS 会在 webkit 移动浏览器上调用硬件加速。

关于如何使用 CSS translate 3d 创建滑动开关有什么想法吗？

谢谢大家，

G

Answer 1

使用tranlateY()还是没有使用硬件加速

如果您仍想使用 jQuery Mobile 来实现切换效果，您应该更改 Jquery Mobile CSS。

寻找这个:

.slide.in {
            -webkit-transform: translateX(0);
            -webkit-animation-name: slideinfromright;
            }
.slide.out {
            -webkit-transform: translateX(-100%);
            -webkit-animation-name: slideouttoleft;
        }

@-webkit-keyframes slideinfromright {
            from { -webkit-transform: translateX(100%); }
            to { -webkit-transform: translateX(0); }
        }
@-webkit-keyframes slideouttoleft {
            from { -webkit-transform: translateX(0); }
            to { -webkit-transform: translateX(-100%); }
        }

(参见此处 http://jquerymobile.com/demos/1.1.0-rc.1/docs/pages/page-customtransitions.html )

并更改:

"translateX(-100%)" to "translate3d(-100%,0,0)"<br>
"translateX(0)" to "translate3d(0,0,0)"<br>
"translateX(100%)" to "translate3d(100%,0,0)"

这将使 jQuery for Mobile 过渡到 webkit 设备时更加顺畅。

来自 Webkit:

translate3d(x, y, z) Move the element in x, y and z, and just move the element in z. Positive z is towards the viewer. Unlike x and y, the z value cannot be a percentage. https://www.webkit.org/blog/386/3d-transforms/

众所周知，translate3d 的使用将 CSS 动画推向了硬件加速。即使您想要进行基本的 2d 翻译，也可以使用 translate3d 获得更多功能!

http://davidwalsh.name/translate3d

这样您就可以实现您的目标。

迭戈特里戈