Jquery 过渡和平移3D水平滑块动画问题

我正在为我的商店制作无限循环水平产品滑块，结果卡住了

问题是，当任一侧都没有溢出的产品时，将调用insertBefore/After jQuery函数将产品从一侧移动到另一侧

移动产品后，jQuery将禁用转换并更改CSS转换属性，该属性将隐藏没有动画的产品，所以用户无法看到

隐藏移动的产品后，将再次启用转换，并再次更改“变换”属性，但产品将移动（因为变换已更改），但转换不会为其设置动画

我希望你明白我的问题是什么。。。尝试运行我的代码，您将看到

我试图通过以下方式使其发挥作用：

• 使用CSS函数更改内联CSS
• 添加和删除自定义类（addClass、removeClass、toggleClass）
• 花了几个小时到处玩，用谷歌搜索，却没有运气

CSS:

HTML:

      .mtt-product-slider-control-wrap {
    padding: 0px 20px;
    position: relative;
    width: 100%;
  }
  .mtt-product-slider-wrap {
    overflow: hidden;
    position: relative;
    width: 100%;
    font-size: 0;
  }
  .mtt-product-slider {
    position: relative;
    left: 0;
    display: block;
  }
  .mtt-product-wrap {
    position: relative;
    display: inline-block;
    background: yellow;
    padding: 25px;
    text-align: left;
    font-size: initial;
  }
  .mtt-product {
    background: red;
  }
  .mtt-product-slider-left {
    height: 30px;
    width: 30px;
    background: #666;
    opacity: 0.8;
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -15px;
    z-index: 100;
    cursor: pointer;
    transition: 0.4s;
    border-radius: 50%;
    color: #fff;
  }
  .mtt-product-slider-right {
    height: 30px;
    width: 30px;
    background: #666;
    opacity: 0.8;
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -15px;
    z-index: 100;
    cursor: pointer;
    transition: 0.4s;
    border-radius: 50%;
    color: #fff;
  }

<div class="container" style="margin-top: 300px;">
  <div class="row">
    <div class="mtt-product-slider-control-wrap">
      <div class="mtt-product-slider-left"></div>
      <div class="mtt-product-slider-right"></div>
    <div class="mtt-product-slider-wrap">
    <div class="mtt-product-slider">


      <div class="mtt-product-wrap">
        <div class="mtt-product">
          <p>PRODUCT 1</p>
        </div>
      </div>
      <div class="mtt-product-wrap">
        <div class="mtt-product">
          <p>PRODUCT 2</p>
        </div>
      </div>
      <div class="mtt-product-wrap">
        <div class="mtt-product">
          <p>PRODUCT 3</p>
        </div>
      </div>
      <div class="mtt-product-wrap">
        <div class="mtt-product">
          <p>PRODUCT 4</p>
        </div>
      </div>
      <div class="mtt-product-wrap">
        <div class="mtt-product">
          <p>PRODUCT 5</p>
        </div>
      </div>

</div>
  </div>
  </div>
  </div>
</div>

jQuery(document).ready(function() {

    var sliderWrapWidth = jQuery('.mtt-product-slider-wrap').width();
    var productWidth = sliderWrapWidth / 3;
    var productCount = jQuery('.mtt-product-wrap').length;
    var sliderWidth = productWidth * productCount;

    var stepCount = 0;

    var translate3dValue = 0;

    var productSlider = jQuery('.mtt-product-slider');

    productSlider.outerWidth(sliderWidth);

    jQuery('.mtt-product-wrap').each(function(){
      jQuery(this).outerWidth(productWidth);
    });

    jQuery('.mtt-product-slider-left').on('click', function() {
      stepCount++;
      if(stepCount == productCount - 2) {
        translate3dValue += productWidth;
        productSlider.css({
          transition: 'none',
          transform: 'translate3d(' + translate3dValue + 'px, 0px, 0px)'
        });
        jQuery('.mtt-product-wrap:last').insertBefore('.mtt-product-wrap:first');
        stepCount = productCount - 3;
      }
      translate3dValue -= productWidth;
      productSlider.css({
        transition: 'all 1000ms ease 0s',
        transform: 'translate3d(' + translate3dValue + 'px, 0px, 0px)'
      });
    });

    jQuery('.mtt-product-slider-right').on('click', function() {
      stepCount--;
      if(stepCount == -1) {
        translate3dValue -= productWidth;
        productSlider.css({
          transition: 'none',
          transform: 'translate3d(' + translate3dValue + 'px, 0px, 0px)'
        });
        jQuery('.mtt-product-wrap:first').insertAfter('.mtt-product-wrap:last');
        stepCount = 0;
      }
      translate3dValue += productWidth;
      productSlider.css({
        transition: 'all 1000ms ease 0s',
        transform: 'translate3d(' + translate3dValue + 'px, 0px, 0px)'
      });
    });

  });