CSS + JQuery 页面淡化 Out/In - Safari 问题

Question

我正在尝试在网站中跨页面导航时进行淡出和淡入。我让它在几乎所有浏览器（FF、Chrome、IE10 和 11、Android 和 iOS）中都能优雅地工作。但是 Safari 桌面（v.9.1、10.0 和 10.1）不会淡出，更糟糕的是，当点击返回按钮时，返回的页面被隐藏（不透明度为 0）。奇怪的是，Safari iOS 没有后退按钮问题（不过在离开页面时仍然没有淡出）。

这是目前的处理方式。有没有更优选的方法（我们在这里很接近）？？

HTML:

<body>
<div id="content-wrap" class="content fade-out">Page content here.</div>
</body>

JQuery:

$(window).load(function() {
    $("#content-wrap").removeClass("fade-out");
});  

window.addEventListener("beforeunload", function () {
  $("#content-wrap").addClass("fade-out");
});

CSS:

.content {
opacity: 1;
transition: 0.8s opacity; 
}
.content.fade-out {
opacity: 0;
}

Answer 1

通过将此添加到 JS (based on an answer found here)，我能够在 Safari 中正常工作：

window.addEventListener("pageshow", function() {
$("#content-wrap").removeClass("fade-out");
}, false);

我不确定这是否会导致与 $(window).load(function() 的任何潜在冲突，但它似乎在我目前测试过的所有浏览器中都运行正常。

CSS + JQuery 页面淡化 Out/In - Safari 问题

CSS + JQuery Pages Fade Out/In - Safari Issue

css

jquery

fade

opacity