Итак, у меня есть базовый c шаблон веб-сайта, который я использовал из видео на Barba. js для диагностики, была ли эта проблема связана с посылкой или barba. Когда я запускал код без связывания с parcel, переходы работали так же хорошо, как и ссылки. Однако, когда я связался с parcel и запустил npm run dev, мои ссылки href перестали работать, как и переходы, в то время как консоль показала 0 ошибок. Вот 4 файла кода.
примерно. html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page Transition Using BarbaJS & GSAP</title>
<link rel="stylesheet" href="main.css" />
</head>
<body data-barba="wrapper">
<div class="load-container">
<div class="loading-screen"></div>
</div>
<main data-barba="container" data-barba-namespace="about-section">
<div class="header">
<h1 class="title animate-this">
about page
</h1>
<div class="animate-this button">
<a href="index.html">go back to home</a>
</div>
</div>
</main>
</body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://unpkg.com/@barba/core"></script>
<script
type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js"
></script>
<script src="main.js"></script>
</html>
index. html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page Transition Using BarbaJS & GSAP</title>
<link rel="stylesheet" href="main.css" />
</head>
<body data-barba="wrapper">
<div class="load-container">
<div class="loading-screen"></div>
</div>
<main data-barba="container" data-barba-namespace="home-section">
<div class="header">
<h1 class="title animate-this">
home page
</h1>
<div class="animate-this button">
<a href="about.html">go to about</a>
</div>
</div>
</main>
</body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://unpkg.com/@barba/core"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js"></script>
<script src="main.js"></script>
</html>
main. css
html,
body {
margin: 0;
padding: 0;
background: #161616;
color: white;
}
.loading-screen {
position: relative;
padding-left: 0;
padding-right: 0;
padding-top: 0;
background-color: #4bedc2;
width: 0%;
height: 100%;
}
.load-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
overflow: hidden;
z-index: 10;
pointer-events: none;
}
h1 {
position: absolute;
top: 38%;
left: 50%;
transform: translate(-50%, -50%);
font-family: "Cosi Azure";
font-size: 84px;
}
.button {
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
}
.button a {
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
color: white;
border: 1px solid white;
padding: 24px 40px;
text-transform: uppercase;
letter-spacing: 4px;
font-size: 10px;
transition: 0.3s;
}
.button:hover a {
background: white;
color: #161616;
transition: 0.3s;
}
основной. js
function delay(n) {
n = n || 2000;
return new Promise((done) => {
setTimeout(() => {
done();
}, n);
});
}
function pageTransition() {
var tl = gsap.timeline();
tl.to(".loading-screen", {
duration: 1.2,
width: "100%",
left: "0%",
ease: "Expo.easeInOut",
});
tl.to(".loading-screen", {
duration: 1,
width: "100%",
left: "100%",
ease: "Expo.easeInOut",
delay: 0.3,
});
tl.set(".loading-screen", {left: "-100%"});
}
function contentAnimation() {
var tl = gsap.timeline();
tl.from(".animate-this", {duration: 1, y: 30, opacity: 0, stagger: 0.4, delay: 0.2});
}
barba.init({
sync: true,
transitions: [
{
async leave(data) {
const done = this.async();
pageTransition();
await delay(1000);
done();
},
async enter(data) {
contentAnimation();
},
async once(data) {
contentAnimation();
},
},
],
});