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

【问题标题】：Animate position of items in CSS3 Column layoutCSS3列布局中项目的动画位置
【发布时间】：2012-11-26 01:04:55
【问题描述】：

我创建了一个 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 Columns 可以吗？如果不是，我应该更喜欢哪种方法？怎么样？

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

【问题讨论】：

标签： html css css-transitions

【解决方案1】：

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

【讨论】：

是的，这个效果几乎就是我想要的。但是有一个问题：如果你延长过渡时间（比如 3 秒），你会看到其他图块不会开始移动，直到有足够的文本位置......（见这个：jsfiddle.net/AQ7bp/25，我正在使用 Chrome 23）我尝试在每个图块内用 div 替换该文本，现在图块会立即移动，但内部的 div 只会在一侧： jsfiddle.net/AQ7bp/23 知道如何解决这个问题吗？
不太清楚你所说的div 只是一方面，你能解释一下吗？ jsfiddle.net/AQ7bp/26
如果你把一个div放在主div里面，那么子div只会放在一边。看到这个：jsfiddle.net/AQ7bp/23 和这个屏幕截图：i.stack.imgur.com/fwoAt.png 如你所见，红色 div 的一半（它在绿色 div 之一内）不可见，但应该是在下一列中可见...
我根本看不到...我看到那里的所有数字都很好，请参阅我之前链接的示例（修订版 26）。一切对我来说都很好。 Windows 7 上的 Chrome 23。你在运行什么？
我在 Windows 8 上使用 Chrome 23。请检查：jsfiddle.net/AQ7bp/27（这几乎就像修订版 26，但在每个图块中添加了<br /><br />）对我来说，图块的文本变得不可见直到它们完全适合右列。

【解决方案2】：

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

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

当移除一个盒子时，将这个容器设置为max-height: 0。你可以用“父母”得到周围的盒子。然后让你的盒子发出动画：

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

这样就会得到效果。

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

【讨论】：

谢谢，但我希望它垂直动画。（我的意思是，2 去 1 的地方，3 去 2 的地方，4 去 3 的地方，等等。）有可能吗？（在我的小提琴中查看 1,2,3,... 的顺序）