页面过渡

Question

我正在尝试应用页面转换。它主要包括将 class 添加到 div 和 运行 页面卸载之前的转换。这就是我的。
https://codepen.io/bcrvlh/pen/mddOQLx

window.addEventListener("beforeunload", function(event) { 
$("a").click(function(){
$("bottom-layer").addClass("active");});
});

你能帮我个忙吗？谢谢

Answer 1

HTML

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

JS

window.onload = function(){
  let element = document.getElementById("bottom-layer");
  element.classList.add("active");
};

与jQuery

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

如果您希望它在页面卸载之前发生，您应该为每次点击创建一个函数并设置超时，例如：

Html

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

JS

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);
}