使用JavaScript激活Webkit CSS3動畫

Question

我正在尋找使用Webkit CSS3將一個絕對定位的DIV從一個位置移動到另一個位置，當按下按鈕時，通過更改其左側和右側CSS屬性。但是，我看到的所有示例都使用靜態CSS規則來應用此過渡。

我不知道新的位置，所以如何動態應用這個CSS3轉換？

Answer 1

一旦定義了轉換，無論您如何更改元素上的CSS值，它都將適用。因此，您可以使用JavaScript應用內聯樣式，並且該元素將生成動畫。所以像這樣的CSS：

left: 100px; 
top: 100px; 
-webkit-transition: top 300ms ease-in 100ms, left 200ms ease-in 50ms; 
-moz-transition: top 300ms ease-in 100ms, left 200ms ease-in 50ms; 
-o-transition: top 300ms ease-in 100ms, left 200ms ease-in 50ms; 
transition: top 300ms ease-in 100ms, left 200ms ease-in 50ms; 

有這樣的功能：

function clickme() { 
    var el = document.getElementById('mydiv'); 
    var left = 300; 
    var top = 200; 
    el.setAttribute("style","left: " + left + "px; top: " + top + "px;"); 
} 

而且你會看到動畫，當你調用該函數。你可以從任何你喜歡的地方獲得左側和頂部的值。 I've done a full example。

Answer 2

另一種選擇是使用jQuery Transit移動絕對定位的div左或右：

的Javascript：

$("#btnMoveRight").click(function() { 
    $('#element').transition({ left: '+=50px' }); 
}); 

$("#btnMoveLeft").click(function() { 
    $('#element').transition({ left: '-=50px' }); 
}); 

JS Fiddle Demo

它運作良好，在移動設備和處理您的CSS3 /瀏覽器兼容性爲您。