在浏览器刷新/单击内部菜单链接时关闭页面动画

Question

我制作了一个打开页面动画，它会在页面加载后立即运行。

我的问题是关闭动画时间。例如，它持续 2 秒，我喜欢在浏览器刷新/单击内部菜单链接（浏览器操作最多）时实现它。 我知道如何在 onunload 上运行脚本并研究了很多实现，但问题是浏览器在 2 秒结束之前离开页面。它削减了我看到的动画已经开始。

是否可以让浏览器暂停刷新或加载下一页 2 秒？

我能想到的唯一一件事是在我的内部链接上绑定 JS 代码以启动关闭动画，并在 2 秒后进行实际链接重定向。 Lats 说这可以在内部链接中使用，但我可以让浏览器操作做同样的事情吗？

setTimeout(function() {
  $(document).ready(function() {
    $('#plahta').prop('checked', false);
  });
}, 2000);


setTimeout(function() {
  $(document).ready(function() {
    $('#plahta').prop('checked', true);
  });
}, 4000);

.curtain {
  margin: 0 auto;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.curtain__wrapper {
  width: 100%;
  height: 100%;
}

.curtain__wrapper input[type=checkbox] {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  top: 0;
  left: 0;
}

.curtain__wrapper input[type=checkbox]:checked~div.curtain__panel--left {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

.curtain__wrapper input[type=checkbox]:checked~div.curtain__panel--right {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

.curtain__panel {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  background: #23232e;
  color: #fff;
  float: left;
  position: relative;
  width: 50%;
  height: 100vh;
  -webkit-transition: all 2s ease-in-out;
  transition: all 2s ease-in-out;
  z-index: 80;
  transition-timing-function: ease-in-out;
}

.curtain__panel--left {
  -webkit-box-pack: end;
  justify-content: flex-end;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.curtain__panel--right {
  -webkit-box-pack: start;
  justify-content: flex-start;
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

.curtain__content {
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="curtain">
  <div class="curtain__wrapper">
    <input type="checkbox" id="plahta" checked>
    <div class="curtain__panel curtain__panel--left">
      <span class="intro">DOBRO</span>
    </div>
    <main class="wrapper dark curtain__content" id="main">
      <div id="fullpage" class="w3-container spinner">
        <h1>TEST</h1>
      </div>
    </main>
    <div class="curtain__panel curtain__panel--right">
      <span class="intro">DOŠLI</span>
    </div>
  </div>
</div>

Answer 1

您不能暂停、停止或阻止浏览器退出或刷新页面，除非使用alert()。

如果您想重定向，您可以检测元素上的click 事件，触发动画，并在动画完成时将回调设置为location.href = "someurl"，并带有您要重定向到的URL。

我认为您可以设法在单页网络应用程序中处理刷新。但这并不意味着你应该。当人们退出/刷新时，他们不会关心看到动画播放。这是我的 UX 建议。