如何在卸载页面之前触发 CSS 过渡？答案

【问题标题】：How to fire a CSS transition before unloading the page?如何在卸载页面之前触发 CSS 过渡？
【发布时间】：2020-11-14 09:08:59
【问题描述】：

当用户进入和离开页面时，我想要一个网站的简单页面转换。

现在我决定使用简单的 CSS 过渡。我在页面中添加了一个元素.amb-preloader，默认情况下它是一个覆盖整个屏幕的灰色矩形。加载页面时，我向元素添加一个类，使矩形消失：

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

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

我是这样做的：

$('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)

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

【问题讨论】：

标签： javascript jquery css load css-transitions

【解决方案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 分配给元素。如果是这样：继续并触发另一次点击。如果不是：返回；

【讨论】：