jquery - jQuery UI 尽可能使用 CSS 平滑过渡

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

我发现了一个非常有用的 jquery 插件，名为 jquery-animate-enhanced，它在可能的情况下使用 css 转换来制作动画。我在移动 webkit 浏览器中的滑动过渡非常不稳定时遇到了麻烦，这产生了奇迹。

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