Question

我正在尝试在我正在处理的项目上更改页面时实现转换效果。期望的效果如下：

由于@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);

iOS / Android上一页的CSS动画和页面刷新

1 个答案: