CSS3浮动div的动画布局更改

Question

调整窗口大小时，浮动div将按预期换行到下一行。但我真的希望这种布局的改变是动画。

EDIT:顺便说一句，最好能找到一个不依赖JQuery的解决方案。如果需要的话，我不介意写自己的js。理想情况下，我希望在看到AngularJS指令工作后将其实现到AngularJS中，因此我不想要jQuery依赖项。

以下是我的代码的缩短版本：http://jsfiddle.net/cDS7Q/3/

HTML

<div id="content">
    <div>&nbsp;</div>
    <div>&nbsp;</div>
    <div>&nbsp;</div>
    <div>&nbsp;</div>
    <div>&nbsp;</div>
</div>

这是我的CSS

body {background-color: #333;}
#content div {
    position: relative;
    float: left;
    background-color: #eee;
    margin-left: 10px;
    margin-bottom: 10px;
    width: 100px;
    height: 100px;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -ms-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
}
#content {
    margin-top: 50px;
    padding-top: $gutter;
    padding-bottom: 50px;
    overflow: hidden;
    width: 100%;
}

我试图达到的效果与这个网站类似：http://saffron-consultants.com/journal/

调整窗口大小以查看块在其新位置上的动画效果。

Answer 1

你可以试试流沙。http://razorjack.net/quicksand/

Answer 2

使用css是可能的，但前提是使用媒体查询更改参数。

例如：

如果您更改元素的宽度，或者媒体查询的填充和边距，那么您将获得动画。此外，如果您将div定位为绝对或相对，并更改媒体查询中的位置，那么它就可以工作了。

但不是简单的浮动/包装。为此，您需要JavaScript/jQuery。

例如，把这个添加到你的小提琴上：

body {
    background-color: #333;
}
#content div {
    position: relative;
    float: left;
    background-color: #eee;
    margin-left: 20px;
    margin-bottom: 20px;
    width: 200px;
    height: 200px;
    -webkit-transition: all .7s ease;
    -moz-transition: all .2s ease;
    -ms-transition: all .7s ease;
    -o-transition: all .7s ease;
    transition: all .7s ease;
}
#content {
    margin-top: 50px;
    padding-top: $gutter;
    padding-bottom: 50px;
    overflow: hidden;
    width: 100%;
}
@media screen and (max-width: 480px) {
#content div {
    margin-left: 10px;
    margin-bottom: 10px;
    width: 100%;
    height: 100px;
    }
}