Javascript 使用iOS/Android在上一页上进行CSS动画和页面刷新

当我在工作的项目中更改页面时，我试图实现一种过渡效果。预期效果如下：

• 由于有一个

  @关键帧

• 在单击的任何链接上，页面不透明度将更改回0，并带有另一个

  @关键帧

• 我添加了一个

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

if（document.body.style中的“动画”）{
var animationEnd=“animationEnd”
}
否则{
var animationEnd=“webkitAnimationEnd”
}
var link=document.querySelectorAll（'a'）；
对于（变量i=0；i

尝试将要“刷新”的代码包装到

pageshow

：

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

---

谢谢正是我想要的。