javascript - 如果 elem 具有过渡属性 (jQuery)，则值累积在 .css() 中不起作用

Question

每当我每次滑动屏幕时，我都在尝试累积特定变量的值。

但问题是，在 jQuery 中，当 element 具有 transition 属性时，累积不适用于 .css 方法。

看看区别:

我的期望是每 1 秒将 left 值增加/减少 4%。每次累积一个特定值。 (4%, 8%, 12% ...) (-4%, -8%, -12% ...)

我知道有一个选项可以使用 .animate() 方法，但据我所知，使用 .animate() 方法更难，也更复杂在目标上给出 transition。我想尽可能不使用 .animate() 方法来解决这个问题。

当元素具有 transition 时，是否有任何方法可以使用 .css 来累积值？

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 过渡从 View 中顺利滑出到左侧。为此，您无需担心帧，只需在 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>