jquery - Firefox 在过渡效果上滞后

Question

我保留了页面的主要内容: http://boxfly.free.fr/test/transition

因此，我们可以在右上角选择将要显示的框数，不幸的是只有 2 个框，当我们单击“单击此处移动 div”时 Firefox 滞后

CSS:

 #DivWraper {
     transition: margin-left 0.5s ease-in; /* 0.5 second transition effect to slide in the sidenav */
 }
 #DivWraper.openSidebar {
     margin-left: 250px;
 }

JS:

 $("#LinkChange").click(function() {
     if($("#DivWraper").hasClass("openSidebar")) {
         $("#DivWraper").removeClass("openSidebar");
     } else {
         $("#DivWraper").addClass("openSidebar");
     }
 });

Chrome 的过渡效果始终流畅，即使显示 50 个框也是如此。

我怎样才能优化这个效果，让它在 Firefox 中流畅运行？

Answer 1

您可以在可移动的 div 上使用翻译来为其提供一些硬件提升。

`transform: translateZ(0);`