CSS转换为隐藏另一个元素后元素的平滑转换

Question

问题：我可以使用CSS转换来控制一个div如何移动到由另一个隐藏的div创建的空闲空间中吗。

我的应用程序中有一些元素根据用户设置的间隔显示和消失（显示：无）。正如预期的显示：无，有时相邻元素会移动以占用空出的空间。

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

这里有一个JS fiddle，它通过点击按钮来说明这个场景。当#红色被隐藏时，我希望看到#蓝色逐渐进入位置。Thx。

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，然后滑动容器以组合视觉效果。