Как дать дополнительное назначение (+ =) для перевода в JS (jQuery)? - PullRequest
Новая
       15

Как дать дополнительное назначение (+ =) для перевода в JS (jQuery)?

1 голос
/ 04 июня 2019

Я ожидаю установить оператор присваивания (+=/-=) на 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>

1 Ответ

2 голосов
/ 05 июня 2019

Согласно совету @ Rory, я создал простой модуль для решения моей проблемы. Я поделюсь этим с кратким описанием для людей, которые имеют такую ​​же проблему, как я, в ближайшем будущем.

Основная функция этого модуля - Неограниченное накопление . В отличие от метода .css() в jQuery, на накопление не влияет свойство transition CSS.

Спасибо за совет @RoryMcCrossan: -)

========= ПОСЛЕДНИЕ ОБНОВЛЕНИЯ =========

Теперь пользователь может накапливать любые виды unit, такие как px, cm, rem, даже %.

см. В Github 

// @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>
...