CSS/JS 效果在 Safari 上損壞

Question

我已經在 JS 觸發的文本上添加了 CSS 動畫，它們在除 Safari 之外的所有瀏覽器中都能正常工作。 當您單擊一行文本時，所有文本行都會淡出，在 Safari 上，一旦您單擊文本和 go 到下一頁，如果單擊返回，效果會在頁面加載時觸發，然后重置並且不會在單擊時觸發.

知道如何為 Safari 解決此問題，您可以在此頁面上看到效果

這是 CSS animation：

.hometext.active {

  animation: fadeOutBottomLeft; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 2s;
}

.hometext.slide {

  animation: fadeOutTopRight; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 2s;
}

這是我用來觸發效果的代碼：

  jQuery(".hometext").click(function() {
    jQuery(this).toggleClass("slide");
    jQuery(".hometext").toggleClass("active");
        jQuery("#header-elementor").toggleClass("active");
  })
})

Answer 1

瀏覽器后退按鈕jQuery腳本。

$(window).on('popstate', function(event) {
 alert("pop");
 // Write your code here when user click the browser back button.
});

在您發表評論后，如果我理解正確，您希望在用戶單擊瀏覽器后退按鈕時與animation相對。 只是它對你不起作用。 您必須了解瀏覽器后退按鈕的工作原理。

window.history.replaceState(); //work exactly like pushstate bt this one replace the history instead of creating new one...
window.history.backward(); // To move backward through history, just fire this event...
window.history.forward();// To move forward through history ...
window.history.go(-1); // Go back to one page(or whatever value u passed) through history
window.history.go(1); // Go forward to one page through history..

我在MacOS 10.14 Mojave和Safari版本13.1.1中測試了您的站點，它的工作方式與 chrome 相同。

Answer 2

你可以試試：

jQuery(".hometext").click(function(e) {
  jQuery(this).toggleClass("slide");
  jQuery(".hometext").toggleClass("active");
      jQuery("#header-elementor").toggleClass("active");
  setTimeout(()=> { 
    //remove the classes so they don't get reactived with back button
    //since you mentioned page load time is what's causing the delay, you may have to skip this
    jQuery(this).toggleClass("slide");
    jQuery(".hometext").toggleClass("active");
        jQuery("#header-elementor").toggleClass("active");
    //store the link in a custom attribute or any attribute and force redirect
   window.location.href = e.target.getAttribute('data-link');
    //set timeout to after animation
  },2000)
})

您還必須剝離任何 href 的錨標記； 不幸的是，Safari 在 CSS 方面是一個非常善變的瀏覽器。

編輯：示例 html

<div data-link="/portfolio/elijah" class="elementor-element elementor-element-da798b1 hometext elementor-widget elementor-widget-heading" data-id="da798b1" data-element_type="widget" data-widget_type="heading.default">
    <div class="elementor-widget-container">
      < h2 class="elementor-heading-title elementor-size-default">
        <a href="">DRUM&amp;BASSARENA</a>
      </h2>     
    </div>
</div>