CSS-анимация и обновление страницы на предыдущей странице с iOS/Android
Я пытаюсь добиться эффекта перехода при смене страниц в проекте, над которым я работаю. Желаемый эффект заключается в следующем:
- Страница исчезает с непрозрачностью от 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;
});
}
});
}
1 ответ
Решение
Попробуйте обернуть ваш код, в который вы хотите "обновить" pageshow
:
window.addEventListener("pageshow", function() {
... your code ...
}, false);