6

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

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

4

2 回答 2

0

您可以为此尝试流沙。 http://razorjack.net/quicksand/

于 2013-08-02T17:06:00.087 回答
0

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

}
于 2016-01-08T22:39:46.837 回答