Question

我创建了一个CSS列布局，里面有一些矩形divs。的 This is my code.

当用户点击其中的每一个时，它应该删除。我已经添加了CSS3过渡：

-webkit-transition: all 0.3s ease-in; /*Safari & Chrome*/
-moz-transition: all 0.3s ease-in; /* Firefox 4 */
-o-transition: all 0.3s ease-in; /* Opera */
transition: all 0.3s ease-in;

现在点击的项目会有效删除，但其他矩形（在此div之后）更改其位置而没有任何效果。

如何在更换地点时为其他物品添加效果？ CSS3列可以吗？如果没有，我更喜欢哪种方法？怎么样？

注意：我将创建类似Windows 8开始菜单的内容;当您移除其中的图块时，其他项目将通过动画移动到新位置。

Answer 1

我制作了div display: block并给了他们float: left，这是你想要的效果吗？ http://jsfiddle.net/AQ7bp/22/

Answer 2

我会用容器围绕你的每个盒子，

{
overflow: hidden
max-height: 999px
display: inline-block
}

移除框时，将此容器设置为max-height: 0。你可以用“父母”获得周围的盒子。然后你让你的盒子动画：

surrounding-container {
transition: all 0.2s linear;
[..]
}

这将产生效果。

编辑：这是小提琴： http://jsfiddle.net/sTBjn/

CSS3列布局中项目的动画位置

2 个答案: