使用iOS/Android在前一頁上使用CSS動畫和頁面刷新

Question

我正在嘗試在更改正在處理的項目上的頁面時實現過渡效果。所需的效果是：

• 頁淡入與從0到1的不透明度，得益於@keyframes
• 上的任何鏈接點擊，頁面不透明度改變回至0℃，用另一@keyframes
• 我添加了一個animationEnd事件偵聽器，它將強制頁面的不透明度爲0（以避免奇怪的閃光），然後將轉到鏈接。

這在Chrome，FF和IE的最新版本上工作正常，但我遇到了iOS和Android的問題。當點擊「後退」按鈕時，頁面會顯示其最新狀態（不透明度：0）。我相信這是一個強制CSS/JS不會重新加載的原生解決方案，但它非常令人討厭，因爲我無法在點擊「後退」按鈕時找到「刷新」資源的方式。

有沒有人有這種問題的堅實解決方案？

-

舉個例子，我已經抄我目前JS的樣本如下：

if ("animation" in document.body.style) { 
    var animationEnd = "animationend" 
} 
else { 
    var animationEnd = "webkitAnimationEnd" 
} 

var link = document.querySelectorAll('a'); 
for (var i = 0; i < link.length; i++) { 
    link.item(i).addEventListener("click", function(e) { 
     var linktarget = this.getAttribute('href'); 
     if (linktarget != '#') { 
      e.preventDefault(); 
      page.className += ' ' + 'fadeout'; 
      var fadeout = document.querySelector('.fadeout'); 
      fadeout.addEventListener(animationEnd, function() { 
       this.style.opacity = '0'; 
       window.location.href = linktarget; 
      }); 
     } 
    }); 
} 

Answer 1

嘗試包裝要 「刷新」 到pageshow代碼：

window.addEventListener("pageshow", function() { 
    ... your code ... 
}, false);