如何给 JS(jQuery) 中的翻译加法赋值(+=)？

Question

我的期望是将加法赋值运算符 (+=/-=) 设置为 transform: translateX()，但不知道该怎么做。

我已经尝试了一些方法来做到这一点：

$('.inline-grid').css({transform: 'translate(+= 4%, 0)'}) 
$('.inline-grid').css({transform: 'translate(''+=' + '4' + '%', 0')'})
$('.inline-grid').css({transform: "translate("+=" + "10" + "%", 0)"})
$('.inline-grid').css({transform: '+=' + 'translateX(4%)'})
$('.inline-grid').css({transform: '+=translateX(4%)'})

但是 none 这些工作。

有什么方法可以将 += 运算符赋予 translateX() 吗？

代码：

function delay(callback) {
  let binding = callback.bind(this);
  setTimeout(binding, 400);
}
function action() {
  setInterval(() => {
    $('.inline-grid').css({
      transform: "translateX(10%)"
    })
    console.log(`waiting 400ms`);
  }, 1900);
}
delay(action);

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

    <div id="element">
      <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

根据@Rory 的提示，我制作了一个简单的模块来解决我的问题。我将此内容与简短描述分享给在不久的将来遇到与我相同问题的人。

这个模块的主要特点是无限累积。不像 jQuery 中的 .css() 方法，累积不受 CSS 的 transition 属性.

的影响

感谢@RoryMcCrossan 的建议:-)

=========最新更新=========

Now the user can accumulate any kinds of unit such as px, cm, rem, even %.

See in Github

=========最新更新=========

此代码自 2019 年 8 月 11 日起已过时。

// @BUG FIXED
// @CHANGED THE CODE MORE CLEARER
// @USAGE: Operator.assemble(target, increment, property, unit);

const Operator = (function() {
  function Accumulate(init, acc, name, unit) {
    this.init = document.querySelector(init);
    this.acc = acc;
    this.name = name;
    this.unit = unit;
    this.convert(this.result);
  }
  Accumulate.prototype = {
    convert: function(callback) {
      let defaultDisplay = this.init.style.display;
      this.init.style.display = 'none';
      let bind = callback.bind(this),
          getValues = window.getComputedStyle(this.init, null).getPropertyValue(this.name),
          S2N = parseInt(getValues, 10);
      this.init.style.display = defaultDisplay;
      bind(S2N);
    },
    result: function(value) {
      let getNewValue = value + this.acc;
      this.init.style.left = getNewValue + this.unit;
    }
  }
  return {
    assemble: (init, acc, name, unit) => {
      new Accumulate(init, acc, name, unit);
    }
  }
}());

//==============================================

setInterval(() => {
  Operator.assemble('.content', 10, 'left', '%');
}, 1000);

  #box{
    max-width: 2560px;
    background-color: gold;
  }
  .content {
    left: 10%; /* 10px */
    position: relative;
    transition: 1000ms;
  }

<div id="box">
  <div class="content">
    wowtested
  </div>
</div>

如何给 JS(jQuery) 中的翻译加法赋值(+=)？

How to give an addition assignment(+=) to a translate in JS(jQuery)?

html

javascript

css

jquery

assignment-operator