CSS Animations and page refresh on previous page with iOS/Android

Question

I'm trying to achieve a transition effect when changing pages on a project I'm working on. The desired effect is the following:

• Page fades in with an opacity from 0 to 1, thanks to a @keyframes
• On any link clicked, the page opacity is changed back to 0, with another @keyframes
• I've added an animationEnd event listener which will force the opacity of the page to 0 (in order to avoid a weird flash) and then will go to the link.

This is working fine on the latest versions of Chrome, FF and IE, but I'm having issues with iOS and Android. When hitting the "back" button, the page is showed with its latest state (opacity: 0). I believe this is a native solution which forces the CSS/JS not to reload again, but it's quite annoying as I can't find a way to "refresh" assets when hitting the "back" button.

Does anyones have a solid solution for this kind of issue ?

--

As an example, I've copied below a sample of my current 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

Try wrapping your code you want to "refresh" into pageshow:

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