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

Question

我创建了一个 CSS 列布局，divs里面有一些矩形。这是我的代码。

当用户点击它们中的每一个时，它应该被删除。我已经向它添加了 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 Columns 可以吗？如果不是，我应该更喜欢哪种方法？如何？

---

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

Answer 1

我制作了 divdisplay: 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/