移动GPU加速了slideToggle功能

时间:2012-10-08 23:42:48

标签: jquery ios css mobile hardware-acceleration

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

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

关于如何使用CSS创建幻灯片切换的任何想法翻译3d?

谢谢你们,

2 个答案:

答案 0 :(得分: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)"

这将使webkit设备的jQuery for mobile transition更顺畅。

来自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

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

Diego Trigo

答案 1 :(得分:0)

只是想让你知道JQuery mobile 1.3.1版本正在使用translate3d作为幻灯片动画。 1.3.0没有。