用於爲一個n-n個網格的框或瓦片製作動畫的HTML和JQuery

Question

我想使用HTML 5，CSS，jQuery（動畫）創建一個佈局，如下所示：http://imgur.com/upRti。我想動畫片的多個安排之間的過渡。例如，在一組像這樣的瓷磚或箱子與一組類似的箱子或瓷磚相似的情況下，它可以是http://imgur.com/3ukp8。 （爲了說明的目的，第二張圖片僅僅是第一張圖片的旋轉圖片，但我們可以期待盒子/圖塊的任何組合和組合）。

動畫應該由一個按鈕觸發，並且應該是可重用的，因爲可能有無數種方法來組織這些框。我希望轉換能夠像這樣工作：每個盒子在獨立路徑上朝着屏幕的右側移動，而新盒子從它們自己的獨立路徑左側移動。我希望整個動畫被限制在自己的div上，這樣它就不會干擾頁面上的其他元素（導航欄等）。最後一個限制是我希望它可以在大多數現代瀏覽器中工作（理想情況下也是IE 8和9）。

什麼是最優雅的方式來標記框（兩組）？什麼是好的動畫功能？

Answer 1

我首先看看Isotope，它有很多基於網格的內容的排序和動畫。

查看演示，特別是關於adding elements的部分。這似乎是你要去的效果。

您可能需要通過添加空白/透明項目來「欺騙」它看起來像您的建議佈局。