Проблема анимации горизонтального слайдера Transition и Translate3D - PullRequest
Новая
       5

Проблема анимации горизонтального слайдера Transition и Translate3D

0 голосов
/ 06 февраля 2019

Я делаю горизонтальный слайдер бесконечного цикла для своего магазина и застрял.

Проблема в том, что с обеих сторон нет переполненных товаров, вызывается функция insertBefore / After для перемещения товара изодна сторона к другой.

После перемещения продукта 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)'
      });
    });

  });
...