如何在卸載頁面之前觸發 CSS 轉換？

Question

當用戶進入頁面並離開時，我想要一個網站的簡單頁面轉換。

現在我決定用一個簡單的 CSS 過渡 go 。 我在頁面中添加了一個元素.amb-preloader ，默認情況下它是一個覆蓋整個屏幕的灰色矩形。 加載頁面后，我將 class 添加到使矩形消失的元素中：

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

現在，當用戶單擊鏈接時，我想要類似但相反的東西。 class .amb-loaded應該從.amb-preloader中刪除，然后出現灰色矩形（需要 600 毫秒）。 在這 600 毫秒之后，當灰色矩形出現在所有內容的前面時，瀏覽器應該像往常一樣 go 到下一頁。

我這樣做是這樣的：

$('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 。 我在互聯網上搜索了這個，它說 function 調用自身，因此一直循環。

我不知道為什么它在 Safari 中不起作用而在其他瀏覽器中起作用。 你知道我應該怎么做才能在 Safari 上修復它嗎？ 或者這個 animation 有更好的替代品嗎？

也許完整的錯誤消息會有所幫助：

[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)

（匿名函數 = 匿名 function，荷蘭語直譯）

非常感謝！

最終解決方案

感謝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 是否仍分配給元素。 如果是這樣：繼續並觸發另一次點擊。 如果不是：返回；