javascript - 使用 javascript 更改后，Div 未重置其默认位置

Question

我有一个高度和宽度为空的叠加层，一旦使用按钮单击它就会覆盖整个页面，这个叠加层从top 0 left 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

问题是您的叠加层永远不会重置到其原始位置 top 0 和 left 0。

尝试将此添加到您的 parent() 函数的末尾:

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

这将在经过 700 毫秒(转换持续时间)后将左侧和顶部位置重置为 0。