如何在卸载页面之前触发 CSS 转换？

Question

我想要在用户进入页面和离开页面时为网站进行一些简单的页面转换。

现在我决定进行简单的 CSS 转换。我在我的页面中添加了一个元素 .amb-preloader，默认情况下它是一个覆盖整个屏幕的灰色矩形。加载页面后，我将 class 添加到使矩形消失的元素：

$(document).ready(function() {
  $('.amb-preloader').addClass('amb-loaded');
});

现在我想要类似但相反的东西，因为当用户单击 link 时。 class .amb-loaded 应该从 .amb-preloader 中删除，然后出现灰色矩形（需要 600 毫秒）。在这 600 毫秒之后，当灰色矩形出现在 everyting 前面时，浏览器应该像往常一样转到下一页。

我是这样做的：

$('a').click(function(e){
    var url = $(this).attr('href');
    var element = $(this);
    
    $(this).preventDefault();
    
    $('.amb-preloader').removeClass('amb-loaded');
    $(this).trigger('click');
    
});

此行为在除 Safari 之外的所有浏览器中都运行良好。在我的所有 Apple 设备上，Safari 都无法运行。

我用 Safari 中的控制台检查了这个，它给了我错误 RangeError: Maximum call stack size exceeded。我在网上搜了一下，说是一个函数调用自己，所以一直在循环。

我不知道为什么它在 Safari 中不起作用，而在其他浏览器中却起作用。你知道我应该怎么做才能在 Safari 上修复它吗？或者有更好的替代动画吗？

也许完整的错误信息可以提供一些帮助：

[Error] RangeError: Maximum call stack size exceeded.
    n (jquery.js:2:420)
    pushStack (jquery.js:2:764)
    find (jquery.js:2:24069)
    (anonieme functie) (jquery-migrate.min.js:2:8937)
    (anonieme functie) (jquery.js:2:24601)
    (anonieme functie) (jquery-migrate.min.js:2:3143)
    n (jquery.js:2:420)
    (anonieme functie) (pageload.js:17)
    dispatch (jquery.js:3:12375)
    (anonieme functie) (jquery.js:3:9094)
    trigger (jquery.js:3:11494)
    (anonieme functie) (jquery-migrate.min.js:2:8280)
    (anonieme functie) (jquery.js:3:18873)
    each (jquery.js:2:2908)
    each (jquery.js:2:851)
    trigger (jquery.js:3:18846)
    (anonieme functie) (pageload.js:18)
    dispatch (jquery.js:3:12375)
    (anonieme functie) (jquery.js:3:9094)
    trigger (jquery.js:3:11494)
    (anonieme functie) (jquery-migrate.min.js:2:8280)
    (anonieme functie) (jquery.js:3:18873)
    each (jquery.js:2:2908)
    each (jquery.js:2:851)
    trigger (jquery.js:3:18846)
    (anonieme functie) (pageload.js:18)
    dispatch (jquery.js:3:12375)
    (anonieme functie) (jquery.js:3:9094)
    trigger (jquery.js:3:11494)
    (anonieme functie) (jquery-migrate.min.js:2:8280)
    (anonieme functie) (jquery.js:3:18873)
    each (jquery.js:2:2908)
    each (jquery.js:2:851)
    trigger (jquery.js:3:18846)
    (anonieme functie) (pageload.js:18)
    dispatch (jquery.js:3:12375)
    (anonieme functie) (jquery.js:3:9094)
    trigger (jquery.js:3:11494)
    (anonieme functie) (jquery-migrate.min.js:2:8280)
    (anonieme functie) (jquery.js:3:18873)
    each (jquery.js:2:2908)
    each (jquery.js:2:851)
    trigger (jquery.js:3:18846)
    (anonieme functie) (pageload.js:18)
    dispatch (jquery.js:3:12375)
    (anonieme functie) (jquery.js:3:9094)
    trigger (jquery.js:3:11494)
    (anonieme functie) (jquery-migrate.min.js:2:8280)
    (anonieme functie) (jquery.js:3:18873)
    each (jquery.js:2:2908)
    each (jquery.js:2:851)
    trigger (jquery.js:3:18846)
    (anonieme functie) (pageload.js:18)
    dispatch (jquery.js:3:12375)
    (anonieme functie) (jquery.js:3:9094)
    trigger (jquery.js:3:11494)
    (anonieme functie) (jquery-migrate.min.js:2:8280)
    (anonieme functie) (jquery.js:3:18873)
    each (jquery.js:2:2908)
    each (jquery.js:2:851)
    trigger (jquery.js:3:18846)
    (anonieme functie) (pageload.js:18)
    dispatch (jquery.js:3:12375)
    (anonieme functie) (jquery.js:3:9094)
    trigger (jquery.js:3:11494)
    (anonieme functie) (jquery-migrate.min.js:2:8280)
    (anonieme functie) (jquery.js:3:18873)
    each (jquery.js:2:2908)
    each (jquery.js:2:851)
    trigger (jquery.js:3:18846)
    (anonieme functie) (pageload.js:18)
    dispatch (jquery.js:3:12375)
    (anonieme functie) (jquery.js:3:9094)
    trigger (jquery.js:3:11494)
    (anonieme functie) (jquery-migrate.min.js:2:8280)
    (anonieme functie) (jquery.js:3:18873)
    each (jquery.js:2:2908)
    each (jquery.js:2:851)
    trigger (jquery.js:3:18846)
    (anonieme functie) (pageload.js:18)
    dispatch (jquery.js:3:12375)
    (anonieme functie) (jquery.js:3:9094)
    trigger (jquery.js:3:11494)
    (anonieme functie) (jquery-migrate.min.js:2:8280)
    (anonieme functie) (jquery.js:3:18873)
    each (jquery.js:2:2908)
    each (jquery.js:2:851)
    trigger (jquery.js:3:18846)
    (anonieme functie) (pageload.js:18)
    dispatch (jquery.js:3:12375)
    (anonieme functie) (jquery.js:3:9094)
    trigger (jquery.js:3:11494)
    (anonieme functie) (jquery-migrate.min.js:2:8280)
    (anonieme functie) (jquery.js:3:18873)
    each (jquery.js:2:2908)
    each (jquery.js:2:851)
    trigger (jquery.js:3:18846)
    (anonieme functie) (pageload.js:18)
    dispatch (jquery.js:3:12375)
    (anonieme functie) (jquery.js:3:9094)

(anonieme functie = 匿名函数，直译自荷兰语)

非常感谢！

最终解决方案

感谢StefanN的回答，我稍微修改了一下，最终解决代码如下：

$('a').click(function(event) {
  var url = $(this).attr('href');
  var element = $(this);

  event.preventDefault();
    
  if ($('.amb-preloader').hasClass('amb-loaded')) {
    $('.amb-preloader').removeClass('amb-loaded');    
    setTimeout(function() {
    window.location.href = url;
    }, 300);
  } else {
    return;
  }
});

Answer 1

$('a').click(function(e) {
  var url = $(this).attr('href');
  var element = $(this);

  $(this).preventDefault
  if ($('.amb-preloader').hasClass('amb-loaded')) {
    $('.amb-preloader').removeClass('amb-loaded');
    $(this).trigger('click');
  } else {
    return;
  }
});

您的代码在无限循环中呈现。这将导致另一次点击： $(this).trigger('click');

解决方案是添加一个检查 className 是否仍分配给元素。如果是这样：继续并触发另一次点击。如果不是：return;

如何在卸载页面之前触发 CSS 转换？

How to fire a CSS transition before unloading the page?

javascript

jquery

css

load

css-transitions