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

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

我的应用程序中的元素根据用户设置的时间间隔显示和消失（显示：无）。与显示一样：无，有时相邻图元将移动以占用由所腾出的空间

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

下面是一个JS提琴，它通过点击按钮来演示这个场景。当红色被隐藏时，我希望看到蓝色逐渐进入位置。Thx

以下是JSFIDLE中的代码：

HTML

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

Javascript

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

---

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

$（'#red'）。设置动画（{width:'toggle'}）可用于将其向左滑动

您还可以将
#red
包装到另一个div中，然后淡入
#red
，然后滑动容器以组合视觉效果。
您查看过jQuery效果吗？另外，谢谢，但我尽量避免添加jQueryUI，因为我知道它与引导不太协调。我希望有一个CSS唯一的解决方案。你可以不用jQueryUI。试试看这篇文章：这是一个有趣的想法，我会调查的。但是被删除的元素可能在左边，也可能在上面，因此管理起来可能会很复杂。很可能我希望找到一个太简单的解决方案。：）您还可以使用jquery slideUp（）/slideDown（）方法。对于垂直解决方案。可悲的是，我不知道有哪个神奇的通用选项适用于任何方向。我必须使用它，但沿着这些思路的一些东西可能真的适用于我。当我说它“在上面”时，它不是真的，它只是被包装到下一行，所以这个主题的变化可能有助于平滑它。我将继续，并将此标记为答案。
$("#remove").on("click", function(event){
    if($('#remove').text()=="Remove Red") {
      $('#red').fadeOut();
      $('#remove').html("Restore Red");
    }else {
      $('#red').fadeIn();
      $('#remove').html("Remove Red");
    }
});