CSS动画:使用相对于前一个的新位置移动div

Question

为了更好的性能,我想要替换:

$('#foo').animate({ left: '+=42px' }, 500);

通过过渡(或动画)CSS3.但是我们如何才能在CSS中的左侧属性上实现"+ ="？

如何使用相对于前一个的新左侧位置移动div？

谢谢.

Answer 1

在vanilla-js你不能使用+=,但你可以得到旧值:

document.getElementById('foo').onclick = function() {
  this.style.left = parseFloat(getComputedStyle(this).left) + 42 + 'px';
};

#foo {
  position: relative;
  left: 0;
  transition: 2s left;
}

<div id="foo">Click me multiple times</div>