Question

是否有一个插件/过程/ CSS行/不同方法与jQuery UI框架集成，以便它可以尽可能利用硬件加速转换。

例如，一个网站正在使用一个图库，该图库用户使用UI框架在用户点击相应箭头时将图像滑入和滑出。我希望这一点尽可能顺利。

Answer 1

您可以使用jQuery访问/添加硬件加速的css转换。但是jQueryUI不使用css转换作为其股票动画。

这意味着您必须在css中手动创建幻灯片动画。一个例子，

 $("#myDiv").css("-webkit-transform", "translate3d(800px, 0px, 0px)"); 
 //or some other transform type, (this is specifically for webkit)

然后在你的CSS中，你需要一个缓动函数，如：

#mydiv {
   -webkit-transition:all 0.5s ease-in-out;
   -moz-transition:all 0.5s ease-in-out;
   -o-transition:all 0.5s ease-in-out;
   -ms-transition:all 0.5s ease-in-out; 
   transition:all 0.5s ease-in-out; 
}

这将为您提供硬件加速转换，将#myDiv 800px移动到右侧。

Answer 2

我发现a very useful jquery plugin called jquery-animate-enhanced使用css过渡来制作可能的动画。我在移动webkit浏览器中滑动过渡非常不稳定时遇到了麻烦，这种情况很有用。

http://playground.benbarnett.net/jquery-animate-enhanced/

jQuery UI在可能的情况下使用CSS平滑过渡

2 个答案: