html - 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

I think this is what you are looking for:

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;