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;