如何在 JS(jQuery) 中为翻译添加附加赋值(+=)？答案

【问题标题】：How to give an addition assignment(+=) to a translate in JS(jQuery)?如何在 JS(jQuery) 中为翻译添加附加赋值(+=)？
【发布时间】：2019-10-20 03:05:21
【问题描述】：

我的期望是将加法赋值运算符（+=/-=）设置为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>

【问题讨论】：

Are there any ways to give += operator to the translateX() 不是您尝试的方式。您需要以某种方式将 CSS 属性中的当前值检索到 JS 变量中，在 JS 中执行 += 操作，然后使用来自 JS 的新值更新 CSS 规则。
@RoryMcCrossan 所以我需要做的是：get translate value from the CSS file -> calculate it inside of JS -> send a new value back and override it to the CSS file，对吧？
@mplungjan 我不会使用animate() 方法来解决我的问题。据我所知，使用animate() 方法而不是.css() 或添加classes 来提供transition 更加困难和复杂

标签： javascript jquery html css assignment-operator

【解决方案1】：

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

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

感谢您的建议@RoryMcCrossan :-)

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

现在用户可以积累任意类型的unit，如px，cm，rem，甚至%。

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>

【讨论】：