为什么我的barbajs转换与包裹捆绑时停止工作？
为什么我的barbajs转换与包裹捆绑时停止工作？
提问于 2020-06-19 15:13:26
所以我有一个基本的网站模板，我用Barba.js上的一个视频来诊断这个问题是包裹还是巴尔巴造成的。当我在没有捆绑包裹的情况下运行代码时，转换和链接都运行得很好。然而，当我捆绑包裹并运行npm时，我的href链接停止工作，转换也停止了，而控制台显示了0错误。下面是4个代码文件。
about.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;
}main.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();
},
},
],
});回答 1
Stack Overflow用户
回答已采纳
发布于 2020-06-22 01:25:55
删除钩子前面的异步属性使其工作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62473282
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号