在隐藏另一个元素后，CSS 过渡到元素的平滑过渡。

Question

问题：我能否使用 CSS 过渡来控制一个 div 如何移动到另一个被隐藏的 div 创建的空出空间中。

我的应用中有元素根据用户设置的时间间隔出现和消失（显示：无）。正如 display:none 所期望的那样，有时相邻的元素会移动以占据由 . 腾出的空间。

我不介意在这种情况下移动。我想控制它的移动方式。我想要的是通过 css 转换或其他方法移动，而不仅仅是混蛋到位。这可能吗？

这是一个 JS fiddle，通过按钮单击来说明场景。当#red 被隐藏时，我希望看到#blue 逐渐移动到位。谢谢。

http://jsfiddle.net/uV6W7/1/

这是 jsfiddle 中的代码：

HTML

<div id="red"></div>
<div id="blue"></div>
<p>
<button id="remove" type="button">Remove Red</button>

CSS

#red {
    display: inline-block;
    background-color: red;
    height: 200px;
    width: 200px;
}
#blue {
    display: inline-block;
    background-color: blue;
    height: 200px;
    width: 200px;
}

Javascript

$("#remove").on("click", function(event){
    if($('#remove').text()=="Remove Red") {
      $('#red').fadeOut();
      $('#remove').html("Restore Red");
    }else {
      $('#red').fadeIn();
      $('#remove').html("Remove Red");
    }
});

Answer 1

您可以通过将红色滑动到 0 宽度状态来隐藏红色。这会导致右侧元素似乎滑入左侧的位置。

$('#red').animate({width:'toggle'}); 可以用来向左滑动。

您也可以将#red 包裹在另一个div 中，然后淡出#red，然后滑动容器以组合视觉效果。