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

Question

我制作了一个打开页面动画，运行页面一加载就开始了。

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

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

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

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 事件，触发动画，并使用 [=19= 将动画完成时的回调设置为 location.href = "someurl" ] 你想重定向到。

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

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

Closing page animation on browser refresh / clicking the internal menu links

javascript

css

jquery

animation

css-transitions