Currently working on building my personal portfolio using HTML, CSS, and JavaScript. I have implemented transition animations that work smoothly until clicking on another hyperlink triggers the transitions properly but results in a blank page with the error message 'cannot GET undefined'.
The index.html file consists of a simple home page with hyperlinks correctly linking to my CSS and JavaScript files.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="transitions.css">
<title>Document</title>
</head>
<body>
<div class="transition transition-1 is-active"></div>
<section>
<ul>
<li><a href="/"><span>HOME</span></a></li>
<li><a href="about.html"><span>ABOUT</span></a></li>
<li><a href="contact.html"><span>CONTACT</span></a></li>
<li><a href=""><span>GITHUB</span></a></li>
</ul>
<h1>Mateo Ghidini | Web Developer</h1>
</section>
<script src="main.js"></script>
</body>
The transitions.css file:
.transition-1{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
z-index: 101;
background-color: var(--dark);
opacity: 0;
pointer-events: none;
transition: 0.5s ease-out;
}
.transition-1.is-active{
opacity:1;
pointer-events: all;
}
.transition-2{
position:fixed;
top:0;
left:-100%;
width:100%;
bottom:0;
z-index: 101;
background-color: var(--dark);
pointer-events: none;
transition: 0.5s ease-out;
}
.transition-2.is-active{
left:0px;
}
.transition-3{
position:fixed;
top:100%;
left:0;
right:0;
height:100%;
z-index: 101;
background-color: var(--dark);
pointer-events: none;
transition: 0.5s ease-out;
}
.transition-3.is-active{
top:0px;
}
Within main.js:
window.onload=() =>{
const transition_el = document.querySelector('.transition');
const anchors = document.querySelectorAll('a');
setTimeout(()=>{
transition_el.classList.remove('is-active');
}, 500);
for(let i = 0; i<anchors.length; i++){
const anchor = anchors[i];
anchor.addEventListener('click', e =>{
e.preventDefault();
let target = e.target.href;
transition_el.classList.add('is-active');
setTimeout(()=>{
window.location.href = target;
},500);
});
}
}
Seeking assistance in resolving this issue as it is unfamiliar territory for me.