Question

当红色消失时，我想动画黄色div的运动。

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

我已尝试使用CSS transition属性但似乎并不适用于此类移动。

有没有办法做到这一点？

Answer 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>

Answer 2

您可以通过修改要设置动画的CSS属性来执行此操作。目前定位是基于块布局与另一个div，这不是动画。但是，如果您自己更新CSS位置，那么该转换将会生成动画。请参阅以下示例。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: