如何给JS(jQuery)中的翻译赋予附加赋值(+ =)? [英] How to give an addition assignment(+=) to a translate in JS(jQuery)?

问题描述

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

My expectation is to set the addition assignment operator(+=/-=) to the transform: translateX(), but have no idea how would I do this.

我尝试了一些方法来做到这一点:

I've tried some ways to do this:

$('.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()?

Are there any ways to give += operator to the 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>

推荐答案

根据@Rory的技巧，我编写了一个简单的模块来解决我的问题.对于在不久的将来像我一样有同样问题的人，我会提供简短的说明.

According to @Rory's tip, I've made a simple module for resolving my problem. I share this with a short description for people who have the same problem like me in the near future.

此模块的主要功能是无限累积. jQuery中不太可能使用.css()方法，该累积不受CSS的transition属性的影响.

The main feature of this module is Unlimited Accumulating. Unlikely .css() method in jQuery, the accumulation doesn't affected by the CSS's transition property.

感谢您的建议@RoryMcCrossan:-)

Thank you for the advice @RoryMcCrossan :-)

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

现在用户可以累积任何种类的unit，例如px，cm，rem， 甚至%.

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

在Github中查看

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

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

This code is outdated since 8/11/2019.

// @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)中的翻译赋予附加赋值(+ =)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！