使用javascript

Question

我有一个空白高度和宽度的叠加层，一旦点击它就会覆盖整个页面，这个叠加过渡从前0 左0 一直向下到右下角。关闭此覆盖后，我使用java脚本编辑了css属性，以便在右下角完成转换。

第一次打开和关闭此叠加层时，它工作正常，但是第二次打开它，而不是从左上角开始，它从右下角开始并一直向左移动。我似乎无法解决这个问题。我尝试将左侧重置为0并将顶部重置为0，但它不起作用。

document.querySelectorAll(".overlay_background")[0].addEventListener("click", parent);
   

function parent(event) {
  this.style.left = this.clientWidth + "px";
  this.style.top = this.clientHeight + "px";
  this.style.height = 0;
  this.style.width = 0;
}

function child(event) {
  event.stopPropagation();
}

function http_request_availability() {
  document.getElementById("overlay_background_id").style.left = "0";
  document.getElementById("overlay_background_id").style.top = "0";
  console.log(document.getElementById("overlay_background_id"));
  document.getElementById("overlay_background_id").style.height = "100vh";
  document.getElementById("overlay_background_id").style.width = "100vw";

  document.getElementById("overlay_background_id").style.backgroundColor = "rgba(0,0,0, 0.5)";
  document.body.style.overflow = "hidden";


}

.overlay_background {
  position: fixed;
  overflow: hidden;
  height: 0;
  width: 0;
  left: 0;
  top: 0;
  transition: 0.7s ease;
  z-index: 1;
}

<div class="overlay_background" id="overlay_background_id">
  Hi this is my overlay
</div>
<button class='btn_ws' onclick='http_request_availability();'>Book Work-Shop</button></div>

Answer 1

问题是你的叠加层永远不会重置到前0位的原始位置，而是0。

尝试将其添加到parent（）函数的末尾：

var self = this;
setTimeout(function() {
    self.style.left = 0;
    self.style.top = 0;
 }, 700);

这将在700 ms过去后（转换的持续时间）将左侧和顶部位置重置为0。