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;

CSS位置转换和显示：无

2 个答案: