javascript - 使用 iOS/Android 在上一页上使用 CSS 动画和页面刷新

Question

我正在尝试在我正在处理的元素中更改页面时实现过渡效果。期望的效果如下:

• 页面以 0 到 1 的不透明度淡入，这要归功于 @keyframes
• 在点击任何链接时，页面不透明度会变回 0，并带有另一个 @keyframes
• 我添加了一个 animationEnd 事件监听器，它将强制页面的不透明度为 0(为了避免奇怪的闪烁)，然后转到链接。

这在最新版本的 Chrome、FF 和 IE 上运行良好，但我在 iOS 和 Android 上遇到问题。当点击“后退”按钮时，页面显示其最新状态(不透明度:0)。我相信这是一个强制 CSS/JS 不再重新加载的 native 解决方案，但它很烦人，因为我找不到在点击“后退”按钮时“刷新” Assets 的方法。

有人对这类问题有可靠的解决方案吗？

--

例如，我在下面复制了我当前 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);