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

user_11414756 0
Viewed 540

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%)'})

but none of these work.

Are there any ways to give += operator to the translateX()?

Code: 

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>

assignment-operator css html jquery javascript
1 Answers

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.

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.

Thank you for the advice @RoryMcCrossan :-)

========= LATEST UPDATE =========

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

See in Github

========= LATEST UPDATE =========

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>

user_114147560
Related