CSS3轉換動畫

我對CSS/HTML/JS很新，所以我沒有太多的CSS轉換經驗。CSS3轉換動畫

我想動畫我的網頁上的div元素，但我目前無法達到預期效果。

這裏是我的問題：

在我的HTML我有了它內部的5個div元素一個div容器元素。它們看起來像位於屏幕中間的簡單盒子，目前不可見。我也有5個按鈕在屏幕的角落。

我試圖做的是：

當我點擊一個按鈕（例如按鈕3）左邊的div 3應該會消失，被移動到屏幕左側邊緣後面， 2個div應該這樣做，但是要向右移動。之後，我想讓右側的3個div滑回屏幕，右側的2個div也應該滑回去。所以看起來他們相互滑向他們從最初開始的位置。

我想使用CSS轉換（transform：translateX（Npx）;）來做這個效果。所以在我的JS文件我有這樣的事情：

$(document).ready(function() { 

    $(".button").click(function(){ 

    // PART 1 
     // move 3 divs to the left using transform: translateX(Npx) (no animation) 
     // move 2 divs to the left using transform: translateX(Npx) (no animation) 

    // PART 2 
     // slide 3 divs to the left using transform: translateX(Npx) (with animation) 
     // slide 2 divs to the left using transform: translateX(Npx) (with animation) 

    });

所以問題是，在這種情況下，僅部分一個工程和第二部分似乎不工作 .....如果我附上部分代碼到不同的事件...像另一個點擊按鈕...它工作得很好。

所以我的問題是如果這兩個轉換可以在一個事件下完成？！？！

來源

2013-01-16 Eugene Gordin

在我看來，你是混淆CSS動畫與JavaScript過渡。如果你可以用一些示例代碼創建一個jsfiddle來說明你的問題，那將是非常有用的。 – Jason

嘗試使用[css動畫]（https：//developer.mozilla。org/en-US/docs/CSS/Tutorials/Using_CSS_animations）用於複雜的動畫。給Jason的 – antejan

：這是codepen上的類似例子http://codepen.io/EugeneGordin/pen/oFiyt –

我已經這樣做了，這種效果看起來很棒。如果我正確理解你的問題，你的問題是你在移動div之後運行動畫，所以你的動畫函數使用錯誤的起點。

你需要的是：

要確保你有一個CSS的位置是：相對的;設置在你的div上，這樣動畫就可以工作。
運行您的動畫功能，將您的div相對於其當前位置（即頂部，左側）移動，幷包含成功回調。您可能需要先使用偏移量（）和一些數學來計算行進距離。
完成動畫（成功回調）後，將div的相對位置更改回0px（或之前的任何操作），並同時執行該功能，以便實際將div移動到DOM中的新位置的insertBefore（）。我從來沒有見過閃爍，因爲這些功能幾乎是即時的，但是如果您發現問題，您可以設置隱藏的可見性，同時重置位置並移動div，然後重置視野

您甚至可以在您重置成功回調的動畫期間爲您的div設置自定義z索引，從而允許您確定divs通過/不在哪些元素，或者如果它們相互交叉，則指定哪些元素在頂部。

來源

2013-01-16 18:27:49 JSP64

非常感謝！ –

回答

相關問題