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

你可以參考這個頁面 。