CSS动画:移动一个具有相对于上一个div的新位置的div

Question

为了获得更好的性能，我想要替换：

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

通过过渡（或动画）CSS3。但是我们该如何在CSS中的left属性上实现"+="呢？

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

thx。

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');

你可以参考这一页。