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;
}

这是一个代码笔链接：

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;