CSS + JQuery頁面淡入淡入 - Safari問題

我試圖在瀏覽網站中的頁面時返回一個很好的淡出&。幾乎所有的瀏覽器（FF，Chrome，IE10 & 11，Android & iOS）都可以使用它。但Safari桌面（v.9.1,10.0,& 10.1）不會淡出，更糟糕的是，當點擊返回按鈕時，返回的頁面被隱藏（不透明度爲0）。奇怪的是，Safari iOS沒有後退按鈕問題（儘管離開頁面仍然沒有淡出）。CSS + JQuery頁面淡入淡入 - Safari問題

以下是目前正在進行的操作。有沒有更喜歡的方法（我們在這裏）？

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; 
}

來源

2017-04-25 Kenny J

我能得到的東西在Safari工作加入這個給JS（based on an answer found here）：

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

我不能肯定，如果這導致與$(window).load(function()任何潛在衝突，但似乎在我到目前爲止測試的所有瀏覽器裏工作正常。

來源

2017-04-26 18:39:11

CSS + JQuery頁面淡入淡入 - Safari問題

回答

相關問題