javascript - 单击按钮时打开半页

单击按钮时，我试图打开一种新页面。例如，我有一些项目在页面中垂直和水平居中。我想要这样，以便当单击按钮时，它将把我所有的项目移动到页面的左半部分，并在右半页面上打开一个新页面。
这是我的示例代码：
HTML：

<div>text</div>
<div>text</div>
<div>text</div>
<button>
Click me
</button>

CSS：

body {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
}

当有人点击按钮时，这就是我的目标：


有什么建议么？

最佳答案

请检查是否有帮助。如果需要改进，请给我反馈？

$('#button').click(function(){
  $('.new-content').toggleClass('half').delay(600).fadeIn(100);
  $('.content-container').toggleClass('half');
});

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
}
.content-container {
  height: 100vh;
  display: block;
  background: #ddd;
  float: left;
  width: 100%;
  position: relative;
}
.new-content {
  display: none;
  float: left;
  width: 0;
  height: 100vh;
  background: #f60;
}
.new-content.half,
.content-container.half {
  width: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="content-container">
  <div class="content">
  <div>text</div>
<div>text</div>
<div>text</div>
<button id="button">
Click me
</button>
  </div>
  </div>
<div class="new-content">
  </div>

关于javascript - 单击按钮时打开半页，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41315242/