float div 的 CSS3 动 Canvas 局更改

Question

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

编辑:顺便说一句，找到一个不依赖于 JQuery 的解决方案会很好。如果需要，我不介意编写自己的 js。理想情况下，我希望在看到它工作后将其实现到 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/

调整窗口大小以查看 block 动画到它们的新位置。

Answer 1

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