CSS3为浮动div设置布局更改动画

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

编辑：作为旁白，最好找到一个不依赖JQuery的解决方案。如果需要，我不介意写我自己的js。理想情况下，我希望在看到AngularJS指令工作后将其实现到AngularJS指令中，因此我不希望使用jQuery依赖项

以下是我的代码的简化版本：

HTML

我试图达到的效果与此站点类似：

---

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

为此，您可以尝试使用quicksand。

---

使用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;
    }

}

---

你应该找一个像谢谢你这样的js插件。我希望没有JS这是可能的。但我想还有一些限制，我会在这个项目中使用angularjs，我更喜欢不依赖于JQuery的东西。无论如何，谢谢你的建议。也许同位素源会引导我走向一个好的方向。我只是在我的原始帖子中添加了一个旁注，我更喜欢一个不依赖JQuery的解决方案。谢谢你指出流沙

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%;
}

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;
    }

}