如何解决Barba JS 页面转换未显示
我想进行滑入式页面转换（index.html 到 project.html，反之亦然）。我找到了一个 tutorial 并按照它进行操作，但是当我点击链接时没有显示转换。
有人可以帮忙吗？我还不太熟悉 javascript。
非常感谢
我的 Index.HTML
<!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">
<title>Website</title>
<!--bootstrap-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<!--Specific-->
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="barba-wrapper">
<div class="barba-container">
<!--Header-->
<div class="header" class="container-fluid">
<div class="row justify-content-center">
<div class="col-4 header-sides align-right ">
<a class="menu-letter active" href="index.html">WORK</a>
</div>
<div class="col-4 header-middle">
<img class="menu-image" src="Icon - Ayam.png" alt="" />
</div>
<div class="col-4 header-sides align-left">
<a class="menu-letter " href="about.html">ABOUT</a>
</div>
</div>
</div>
<!--Content-->
<div id="content-index" class="container-fluid">
<div class="row">
<!--Product-->
<div class="col-20">
<a href="project.html">
<img src="" alt="">
<h7 class="bottom-right">Mobile Application</h7>
</a>
</div>
<div class="col-20"></div>
<!--Footer-->
<div class="footer">
<h6>© 2021</h6>
</div>
</div>
</div>
<!--Script-->
<!--Bootstrap-->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js"
integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js"
integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPncuaFLuTMS2G72MMONqmOymq585AcH49TLBQObG"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
crossorigin="anonymous"></script>
<!--barba-->
<script src="barba-1.0.0/dist/barba.min.js" type="text/javascript"></script>
<!--Personalize-->
<script src="barba-effect.js" type="text/javascript"></script>
<script src="style.js" type="text/javascript"></script>
</body>
</html>
项目.HTML
<!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">
<title>Website</title>
<!--bootstrap-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<!--Specific-->
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="barba-wrapper">
<div class="barba-container">
<div class="header-project" class="container-fluid" id="top">
<div class="row justify-content-center ">
<div class="col-10 align-left px-5 mt-3">
<h7 class='underline'>group</h7>
<h4 class="mt-3 mb-2">Project's name</h4>
<h6>Responsibility</h6>
<h6>Year</h6>
</div>
<div class="col-2 align-right px-5 mt-4">
<a href="index.html"><img class="cross" src="cancel.svg" alt="cross"></a>
</div>
</div>
</div>
<!--Content Project-->
<div class="content-project" class="container-fluid mb-5">
<div class="row justify-content-center ">
<div class="col-lg-6 col-sm-8">
<img src="" alt="">
</div>
</div>
</div>
<div id="back-top" class="back-top mb-5">
<a href="#top">
<img class="rotate" src="left-arrow (1).svg" alt="" />
</a>
</div>
<!--Footer-->
<div class="footer">
<h6>© 2021</h6>
</div>
</div>
</div>
<!--Script-->
<!--Bootstrap-->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js"
integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js"
integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPncuaFLuTMS2G72MMONqmOymq585AcH49TLBQObG"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
crossorigin="anonymous"></script>
<!--barba-->
<script src="barba-1.0.0/dist/barba.min.js" type="text/javascript"></script>
<!--Personalize-->
<script src="barba-effect.js" type="text/javascript"></script>
<script src="style.js" type="text/javascript"></script>
</body>
</html>
Barba-effect.js
Barba.Pjax.start();
window.addEventListener("DOMContentLoaded",function () {
var FadeTransition = Barba.BaseTransition.extend({
start: function () {
Promise
.all([this.newContainerLoading,this.fadeOut()])
.then(this.fadeIn.bind(this));
},fadeOut: function () {
},fadeIn: function () {
this.newContainer.classList.add("slide-in");
var that = this;
this.newContainer.addEventListener("animationend",function () {
that.newContainer.classList.remove("slide-in");
that.done();
});
}
});
Barba.Pjax.getTransition = function () {
return FadeTransition;
};
})
样式.css
@keyframes slide-in{
from{
transform: translateX(100%);
visibility: visible;
}
to{
transform: translateX(0%);
}
}
.slide-in{
animation: slide-in 0.5s ease forwards;
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
