CSS3浮动div的动画布局更改

Question

当您调整窗口大小时，浮动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%; 
} 

我想要达到的效果是similair本网站：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; 
    } 

}