如何在 Jquery animate() 中用变换替换 margin-left 动画以修复滞后的多滑块

Question

我先说我最初的问题很难重现。下面简要说明我的问题，问题在底部。

所以我在项目中使用 Jquery 多滑块。这是一个 link：Multislider

现在我的问题是移动元素的动画似乎滞后...有时。它跳跃而不是平稳移动。该元素的工作方式是将 animate() 方法应用于第一项，并将内联 margin-left 属性应用于第一个 .item

通过一些研究，我发现当 margins 用于动画时 CSS 动画通常会导致问题（以及 top/bottom/left/right 和 height/width) 并且使用 transform 更可取。到目前为止一切顺利。

这是 javascript 中创建动画的片段：

function singleLeft(){
        isItAnimating(function(){
            reTargetSlides();
            $imgFirst.animate(
                {
                    marginLeft: -animateDistance /* This is the part that causes me problems */
                }, {
                    duration: animateDuration,
                    easing: "swing",
                    complete: function(){
                        $imgFirst.detach().removeAttr('style').appendTo($msContent);
                        doneAnimating();
                    }
                }
            );
        });
    }

    function singleRight(){
        isItAnimating(function(){
            reTargetSlides();
            $imgLast.css('margin-left',-animateDistance).prependTo($msContent);
            $imgLast.animate(
                {
                    marginLeft: 0
                }, {
                    duration: animateDuration,
                    easing: "swing",
                    complete: function(){
                        $imgLast.removeAttr("style");
                        doneAnimating();
                    }
                }
            );
        });
    }

现在，如果我理解正确，我必须用 transformX 属性替换 marginLeft: -animateDistance 部分，对吗？但是我没能成功。

所以我的问题是，如何将marginLeft: -animateDistance部分替换为transform: translateX()并在括号之间添加animateDistance变量？

我试过 transform: "translateX(-$(animateDistance))" 之类的方法，但那样只会完全禁用动画。
我错过了什么吗？我也愿意听取其他解决动画延迟问题的建议，这就是我得出的结论。

Answer 1

您可以将动画与 $(this) 和 .css() if you use step()

一起使用

let test = "100";

$('div h2').animate({ pxNumber: test }, {
    step: function(pxNumber) {
      $(this).css('transform','translateX(-' + pxNumber + 'px )'); 
    },
    duration:'slow',
    easing: "swing",
    complete: function(){
      console.log('Animation done');
       // doneAnimating();
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div><h2>Move it</h2></div>

如何在 Jquery animate() 中用变换替换 margin-left 动画以修复滞后的多滑块

How to replace margin-left animation with transform in Jquery animate() to fix laggy multislider

javascript

jquery

animation

jquery-animate