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>