仅使用 CSS 为移动以占用空白空间的元素设置动画答案

【问题标题】：Animate an element that moves to occupy empty space with CSS only仅使用 CSS 为移动以占用空白空间的元素设置动画
【发布时间】：2015-01-28 02:37:19
【问题描述】：

http://jsfiddle.net/kscjq0y0/

当红色 div 消失时，我想为黄色 div 的移动设置动画。

我知道这可以通过 jQuery animate 完成，但我想要一个 CSS3 解决方案（即使不是所有现代浏览器都完全支持它）。

我尝试了 CSS transition 属性，但似乎不适用于这种运动。

有没有办法做到这一点？

【问题讨论】：

标签： html css css-transitions

【解决方案1】：

缩小

div {
    height: 100px;
    width: 300px;
    background-color: red;
    margin: 20px;
    padding: 10px;
    
}

#bottom {
    background-color: yellow !important;
    transition: all 0.5s ease;
}

#top {
    transition: all 2s;
}
body:hover #top {
    height: 0px;
    padding: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
}

<div id="top"></div>
<div id="bottom"></div>

【讨论】：

@vals 不要这样！你打败了我 :) 无论如何，你的演示质量更好，使用伪类悬停而不是 jQuery 计时器。

【解决方案2】：

您可以通过修改要设置动画的 CSS 属性来做到这一点。目前定位是基于与其他 div 的块布局，这不是动画。但是，如果您自己更新 CSS 位置，则该过渡将具有动画效果。请参见下面的示例。

window.setTimeout(function () {
    $("#top").fadeOut("slow");
    $("#bottom").css({ top: '0px' });
}, 1000);

div {
    height: 100px;
    width: 300px;
    background-color: red;
    margin: 20px;
    padding: 10px;
    
}

#bottom {
    position: absolute;
    top: 140px;
    background-color: yellow !important;
    transition: all 0.5s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="top"></div>
<div id="bottom"></div>

【讨论】：

这并没有真正帮助，因为在原始问题中 #bottom 不是绝对定位的。在大多数情况下，我认为不会。