尽可能使用 CSS 实现 jQuery UI 平滑过渡

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 向右移动。