Question

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

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

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

这是一个JS小提琴，通过按钮点击来说明场景。当隐藏#red时，我希望#blue逐渐进入位置。谢谢。

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

Answer 2

由于宽度是硬编码的，所以这不是一个很好的解决方案。我最初尝试在第一个方框上使用transform: translateX(-100%)，但这并没有影响第二个方框。这就是我所拥有的：

https://jsfiddle.net/KuhlTime/1epay7bz/

我刚刚将两个盒子都包装成一个包装纸，然后将整个包装纸向左移动，同时淡出了第一个盒子。

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

2 个答案: