implement transition between two pages in HTML
Question
Am trying to implement a transition between two pages in HTML with this code, my problem is that i dont know which section of the javascript points to the html page, am clicking on the link and getting a blank white screen. Am expecting to see the current page fade out in time out of 500 seconds and then the new page fades in with the same timing, here is the code anyways
<!DOCTYPE html>
<html>
<body>
<li class="waves-effect" ><a href="Netbeans_1.html" onclick="transitionToPage('https://www.google.com')">2</a></li>
<script>
window.transitionToPage = function(href) {
document.querySelector('body').style.opacity = 0
setTimeout(function() {
window.location.href = href
}, 500)
}
document.addEventListener('DOMContentLoaded', function(event) {
document.querySelector('body').style.opacity = 1
})
</script>
</body>
<html>
And then in my css file, i have this
body {
opacity: 0;
transition: opacity .5s;
}
The first page fades out very well but the second one is pure white please help...
window.transitionToPage = function(href) { document.querySelector('body').style.opacity = 0 setTimeout(function() { window.location.href = href }, 500) } document.addEventListener('DOMContentLoaded', function(event) { document.querySelector('body').style.opacity = 1 })
body { opacity: 0; transition: opacity.5s; }
<li class="waves-effect" ><a href="Netbeans_1.html" onclick="transitionToPage('https://www.google.com')">2</a></li>
1 answers
solution1
0 ACCPTED 2021-03-19 18:03:21
The only problem is that the default behaviour of <a> is to redirect to href immediately, if you remove it and only call your function in the onclick event it works. (I've increased the fade to show better).
window.transitionToPage = function(href) { document.querySelector('body').style.opacity = 0; setTimeout(function() { window.location.href = href; }, 2000); }; document.addEventListener('DOMContentLoaded', function(event) { document.querySelector('body').style.opacity = 1; });
body { opacity: 0; transition: opacity 2s; }
<li class="waves-effect" ><a onclick="transitionToPage('https://www.google.com')">open google</a></li>
Edit:
If you still want to use the href attribute you can override the default behaviour of the <a> tag by returning false on the onclick event. For example:
window.transitionToPage = function(link) { document.querySelector('body').style.opacity = 0; setTimeout(function() { window.location.href = link.href; }, 2000); return false; }; document.addEventListener('DOMContentLoaded', function(event) { document.querySelector('body').style.opacity = 1; });
body { opacity: 0; transition: opacity 2s; }
<li class="waves-effect" ><a href="https://www.google.com" onclick="return transitionToPage(this)">open google</a></li>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.