CSS-анимация и обновление страницы на предыдущей странице с iOS/Android

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