过渡和translate3d水平滑块动画问题

Question

我正在为自己的商店制作无限循环水平产品滑杆，并且卡住了。

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

产品移动后，jQuery将禁用过渡并更改CSS转换属性，该属性将隐藏没有动画的产品，因此用户看不到它。

隐藏移动的产品后，会再次启用过渡并再次更改transform属性，但是产品会移动（由于更改了变换），但过渡不会使它动起来...

希望您能理解我的问题...尝试运行我的代码，您会看到的。

我试图通过以下方式使它起作用：

• 使用css函数更改内联CSS
• 添加和删除自定义类（addClass，removeClass，toggleClass）。
• 花了几个小时在周围玩耍，没有运气。”

CSS：

      .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;
  }

HTML：

<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：

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)'
      });
    });

  });