移动 GPU 加速滑动切换功能答案

【问题标题】：Mobile GPU accelerated slideToggle functionality移动 GPU 加速滑动切换功能
【发布时间】：2013-07-09 18:42:09
【问题描述】：

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

jQuery 动画在移动设备上运行非常糟糕，因此经过一些研究，似乎只有 CSS 中的 transform: translate3d() 会在 webkit 移动浏览器上调用硬件加速。

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

谢谢大家，

【问题讨论】：

这是一个有趣的话题，但我认为您会通过更具体的问题获得更好的答案。
嗨，G，您能否也添加一些示例代码，以及更多描述，以便我们了解您到底想要做什么？
大家好，感谢您的回复。我最终以不同的方式解决了它。我试图做的是复制 jQuery slideToggle 函数，其中内容可以被隐藏并在触摸时上下滑动。很容易做到，但在移动设备上性能很差，因为它是由 CPU 处理的。一些 CSS 属性在移动 webkit 浏览器上是硬件加速的，主要是 translate3D，使用这个属性可以得到非常流畅的动画效果。最后，我不得不通过在其顶部放置一个元素来隐藏内容，然后使用 translateY() 将其向下滑动。

标签： jquery ios css mobile hardware-acceleration

【解决方案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 用于 webkit 设备的移动过渡更流畅。

来自 Webkit：

translate3d(x, y, z) 在x, y, z中移动元素，并在 z 中移动元素。正 z 朝向观察者。与 x 和 y 不同，z 值不能是百分比。 https://www.webkit.org/blog/386/3d-transforms/

众所周知，使用 translate3d 将 CSS 动画推入硬件加速。即使您希望进行基本的 2d 翻译，也请使用 translate3d 以获得更多功能！

http://davidwalsh.name/translate3d

这样你就可以实现你想要的。

迭戈·特里戈

【讨论】：

非常感谢迭戈！但是，我没有使用 jQuery mobile，只是直接使用 HTML、CSS 和一些 jquery。虽然我仍然可以应用你的技术！再次感谢！
是的，你仍然可以将它应用到普通的 jQuery... 只需使用 CSS 创建你自己的动画，然后通过 jQuery 触发它（比如添加带有动画属性的类）

【解决方案2】：

只是想让您知道 1.3.1 版的 JQuery mobile 正在使用 translate3d 来制作幻灯片动画。 1.3.0 没有。

【讨论】：