页面过渡

Question

我正在尝试应用页面转换。它基本上包括在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);
}