css3轉換：浮動項目上的流體佈局動畫

我想在Silverlight中實現類似流體佈局的轉換，或者像在skydrive中新的css轉換動力photolist視圖中看到的那樣。我認爲這可以用CSS3以某種方式完成。css3轉換：浮動項目上的流體佈局動畫

假設我有這樣的事情：

<div class="items"> 
    <div class="item"> 
     1 
    </div> 
    <div class="item"> 
     2 
    </div> 
    <div class="item"> 
     3 
    </div> 
</div> 

<style> 
    .item { 
     float: left; 
    } 
</style>

如果項目可能會有一些方形或圖像或任何東西。現在我們有一個浮動的項目列表，它包含了調整大小時的項目。我想要實現的是讓這些物品流暢地動畫，當它們被包裹到下一行時，或者浮起來爲其中新添加的物品放置位置。

這很可能一些JavaScript魔術使用絕對位置，但隨後你會犧牲CSS布點，並有手工做的一切與完成。

有沒有什麼辦法可以說類似transition: left, top 1s ease-in-out;？

我試着包裝一些家長格，即浮動裏面的項目，而項目本身具有絕對定位，但隨後的位置是相對於它的父，所以沒有過渡那裏。

Here是Channel9的一個視頻，顯示幾個方面的影響，我說的是那個那顯示1:20左右了。

來源

2011-06-28 sharp johnny

你可以發佈一個鏈接到的你想的效果演示實現？ – RSG

同位素幾乎是我所尋找的：http://isotope.metafizzy.co/ –

jQuery的正是這麼做的。但支持一秒鐘。

我模糊不清眼睛，需要這麼睡，所以我道歉，如果這是隻有一半連貫的，但也許它會提示你在正確的方向。

首先，爲工作考慮正確的工具很重要。 CSS3非常棒，但不是很向後兼容，因此無論如何你都會依賴於JavaScript的舊版瀏覽器。如果你確實想要這樣做，Nuttuts永遠是一個很好的資源，這裏是一個很好的資源，這裏是一個jQuery（一個JavaScript庫）的建議。你不必使用絕對定位，而是關於你的特定目標。你必須發佈，以獲得更具體的建議。 Animate（）與Fadin（），fadeout（）一起是一個很好的多用途函數，它應該滿足確切的需求。搜索例子，你應該找到你要找的東西。

有預製的腳本和工具幾乎所有你能想象，我想谷歌的腳本/插件正是你要尋找的。機會是，它在那裏。這也是一個非常普遍的需求，至少是那個一般的概念。

祝你好運！（如果你有麻煩，送確切的目標/功能的更多的細節，如果你擁有了它，該網站因爲它是目前）

來源

2011-09-07 06:51:08

感謝您的答覆，Jquery仍然需要我手動計算項目的位置和東西，不能使用CSS佈局（可能通過一些黑客的方式）。但它似乎是目前唯一的方法，並且它是一個非常好的JQuery插件，名爲Isotope（請參閱上面的鏈接），它手動完成但非常好。使用css3進行動畫將會很不錯，因爲如果某些動畫沒有出現在舊版瀏覽器中，它將完全可以正常使用。不管怎麼說，還是要謝謝你 –

css3轉換：浮動項目上的流體佈局動畫

回答

相關問題