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

Posted 2023-02-25

【中文标题】如何在 JS(jQuery) 中为翻译添加附加赋值(+=)？

【英文标题】：How to give an addition assignment(+=) to a translate in 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 更加困难和复杂

【参考方案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>