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

Question

问题：我可以使用 CSS 过渡来控制一个 div 如何移动到由另一个隐藏的 div 创建的腾空空间。

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

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

这是一个 JS 小提琴，通过单击按钮说明了该场景。当#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，然后滑动容器以组合视觉效果。