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> 

Answer 2

您可以使用过渡进行平滑动画。 你只需将转换设置放在这样的元素的CSS中，

#foo {
    -webkit-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out
}

然后用这样的脚本来增加左边的增量。

$('#foo').css('left', '+=42px');

你可以参考这个页面 。