CSS位置轉換和顯示：無

Question

我有一個內容，我在不同類別中標記了項目。全部顯示爲塊div;全部完全相同。

有一個選項可以隱藏/取消隱藏某些類別的項目。隱藏物品標記爲display:none，其餘保持不變。

正如你所想象的那樣，剩下的物品會立即填滿隱藏物品的空間。但是，我希望這發生在CSS位置轉換，所以事情不會立即發生，而是隨着時間的推移而發生。

只是爲了讓事情更簡單的測試，我已經添加了此位爲我的CSS文件：

*{ 
    -moz-transition: all 0.5s; 
    -webkit-transition: all 0.5s; 
    -o-transition: all 0.5s; 
    transition: all 0.5s; 
} 

這裏是一個codepen鏈接：

http://codepen.io/zettam/pen/bazqF

當 「潛伏」類被添加到項目中，該項目即時消失，因此沒有轉換髮生。關於如何使這種轉換/重新定位成爲可能？

Answer 1

我認爲這是你在找什麼：

http://blog.stevensanderson.com/2013/03/15/animating-lists-with-css-3-transitions/

Answer 2

我不知道你問什麼，但我相信這可以幫助

transition : position 0.5s ease-in-out; 
-webkit-transition : position 0.5s ease-in-out; 
-moz-transition : position 0.5s ease-in-out; 
-o-transition : position 0.5s ease-in-out;