I need help finding a solution for a transition effect I am implementing in my project. The effect I want to achieve is as follows:
- Page fades in with an opacity that transitions from 0 to 1 using
@keyframes - When any link is clicked, the page opacity goes back to 0 through another set of
@keyframes - I have included an event listener for
animationEndwhich sets the page opacity to 0 to prevent a strange flash and then proceeds to follow the link.
While this works well on Chrome, Firefox, and IE, I am experiencing difficulties on iOS and Android. When users hit the "back" button, the page reloads with its previous state (opacity: 0). I suspect this may be a built-in feature that prevents CSS/JS from reloading, but it's frustrating because I can't figure out how to refresh assets when going back.
Has anyone discovered a reliable solution for this issue?
--
For reference, here is a snippet of my current JS code:
if ("animation" in document.body.style) {
var animationEnd = "animationend"
}
else {
var animationEnd = "webkitAnimationEnd"
}
var links = document.querySelectorAll('a');
for (var i = 0; i < links.length; i++) {
links.item(i).addEventListener("click", function(e) {
var targetLink = this.getAttribute('href');
if (targetLink != '#') {
e.preventDefault();
page.className += ' ' + 'fadeout';
var fadeoutElement = document.querySelector('.fadeout');
fadeoutElement.addEventListener(animationEnd, function() {
this.style.opacity = '0';
window.location.href = targetLink;
});
}
});
}