Question

我想要一个漂亮的淡出＆amp;在浏览网站中的页面时返回。我几乎在每个浏览器（FF，Chrome，IE10＆amp; 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页面淡出/进入 - Safari问题

1 个答案: