Значение. Накопление не работает в .css (), если у элемента есть свойство перехода (jQuery).

Question

Я пытаюсь накапливать значение для конкретной переменной каждый раз, когда я провожу экран каждый раз.

Но проблема в том, что в jQuery накопление не работает с методом .css, если element имеет свойство transition.

Проверьте разницу:

Мои ожидания увеличивают / уменьшают значение left на 4% каждую 1 секунду. Накапливая определенное значение каждый раз. (4%, 8%, 12% ...) (-4%, -8%, -12% ...)

Я знаю, что есть возможность использовать метод .animate(), но, насколько я знаю, использование метода .animate() намного сложнее и сложнее, чтобы дать transition на цели. Я хочу решить эту проблему без использования метода .animate(), насколько это возможно.

Существуют ли способы накопления значения с помощью .css, пока элемент имеет transition?

CodePen и фрагменты:

'use strict';
(function($, window, undefined) {

  class Slider {
    constructor(elem) {
      this.elem = elem;
      this.myFrame = this.elem.find('.inline-grid');
      this.delay(this.action);
    }
    delay(callback) {
      let binding = callback.bind(this);
      setTimeout(binding, 400);
    }
    action() {
      console.log(`waiting 400ms`);
      setInterval(() => {
        this.myFrame.css({left: '-=' + 4 + '%'})
      }, 1000);
    }
  }

  $.fn.getNewSlider = function(options) {
    return this.each(() => {
      const target = $(this);
      const define = new Slider(target, options);
    })
  }

}(jQuery));

$('#element').getNewSlider();

#element{
  position : relative;
  font-size: 3rem;
  font-family: Helvetica;
  display: flex;
  flex-flow: row;
  justify-content: center;
}
.inline-grid {
  position: relative;
  left : 1%;
}
.transition {
  transition: all 1000ms cubic-bezier(.93,.01,.1,.98);
}

<div id="element">
  <!-- Accumulating stops when I add the transition to the class -->
  <div class="inline-grid transition">
    Bazil Leaves
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

Если я правильно понимаю, вы хотите, чтобы элемент плавно выдвигался из вида влево с переходом css. Для этого вам не нужно беспокоиться о фреймах, просто установите общее время перехода в свойстве css transition, а затем используйте javascript, чтобы просто добавить класс, который определяет конечный результат (т.е. .end) после загрузки страницы.

$(document).ready(function() {
  $('#element .inline-grid.transition').addClass('end');
});

#element {
  position: relative;
  font-size: 3rem;
  font-family: Helvetica;
  display: flex;
  flex-flow: row;
  justify-content: center;
}

.inline-grid {
  position: relative;
  left: 1%;
}

.transition.end {
  left: -100%;
}

.transition {
  transition: all 8s cubic-bezier(.93, .01, .1, .98);
}

<div id="element">
  <!-- Accumulating stops when I add the transition to the class -->
  <div class="inline-grid transition">
    Bazil Leaves
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>