javascript - 如何给 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%)'})

但这些都不起作用。

是否有任何方法可以将 += 运算符赋予 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>