Javascript 页面转换

我正在尝试应用页面转换。它主要包括向div添加一个类，并在页面卸载之前运行转换。这就是我所拥有的。

你能帮我一个忙吗？谢谢

HTML

<a href="#">click</a>
<div id="bottom-layer" class="bottom-layer"></div>

使用jQuery

$(document).ready(function(){
  $('#bottom-layer').addClass('active');
})

如果希望在页面卸载之前完成，则应为每次单击创建一个函数并设置超时，例如：

Html

<a onclick = "navigate('place-href-here')"></a>

---

我试过了，但它只在页面加载时起作用，在卸载之前不起作用：/I我做了这个更改

window.addEventListener（“beforeunload”，function（event）{let element=document.getElementById（“底层”）；element.classList.add（“active”）；}

现在它可以工作了，但现在我仍然需要将页面卸载延迟0.7秒，以便可以看到转换

$(document).ready(function(){
  $('#bottom-layer').addClass('active');
})

<a onclick = "navigate('place-href-here')"></a>

function navigate(href-received-as-argument){
  let element = document.getElementById("bottom-layer");
  element.classList.add("active");
  setTimeout(function() {
   window.location.href = href-received-as-argument;
  }, 1000);
}