浮动 div 的 CSS3 动画布局更改

Posted 2023-03-05

【中文标题】浮动 div 的 CSS3 动画布局更改

【英文标题】：CSS3 Animate layout change for floating divs

【发布时间】：2013-08-04 00:36:48

【问题描述】：

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

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

【问题讨论】：

你应该寻找像isotope这样的js插件

谢谢。我希望没有 JS 是可能的。但我想有限制

再想一想，我将在这个项目中使用 angularjs，并且更喜欢不依赖 JQuery 的东西。无论如何感谢您的建议。也许同位素源会引导我走向一个好的方向。

【参考方案1】：

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

【讨论】：

我刚刚在我的原始帖子中添加了一个附注，我更喜欢不依赖于 JQuery 的解决方案。感谢您指出流沙

【参考方案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;