javascript - 使用javascript将一个div分成2个

Question

我有一个类为 .box 的矩形，在它里面，我有一个类为 .btn 的按钮。我需要以这样一种方式产生效果，即当我单击按钮时，矩形应该从中心分成 2 部分，一个部分应该向左移动，另一个部分应该向右移动。我如何使用 jquery 或 javascript 来做到这一点？或者有什么方法可以不使用 jquery 或 javascript 来实现吗？

这是我的 HTML:

<div class="box">
<button class"btn"> click </button>
</div>

这是我的 CSS:

.box{
    width:500px;
    height:500px;
    background-color:royalblue;
}

Answer 1

您不能拆分 HTML 元素。但是，如果您想要实现的只是某种视觉效果，您可以向其中添加其他元素。单击您的 .btn 后，您可以 toggleClass()在它们上面，所以它们的 width 减小了。结合css transition属性，它将被动画化。

参见 my fiddle