У меня есть пример страницы, где я тестирую Барбу. js (v2). Я строю эту страницу локально с виртуальным хостом. Переход, который я сделал с Barba. js, кажется, работает нормально, но проблема, с которой я сталкиваюсь, заключается в том, что якорные ссылки не работают должным образом. Например, когда я щелкаю либо в меню «ОБО» в заголовке, либо на кнопке «ОБ» рядом с изображением, начинается переход, но страница каким-то образом автоматически перенаправляется на главную страницу.
Здесь HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" name="viewport">
<title>Home</title>
<meta content="" name="description">
<link href="css/style.css" rel="stylesheet">
</head>
<body data-barba="wrapper">
<ul class="transition">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="wrapper">
<header>
<nav>
<ul>
<li><a href="/">HOME</a></li>
<li><a href="/about/">ABOUT</a></li>
</ul>
</nav>
</header>
<main data-barba="container" data-barba-namespace="home">
<div class="left">
<h1>Hello There.</h1>
<a href="/about/" class="cta">About</a>
</div>
<img src="img/man.jpg" alt="man">
</main>
</div>
<!-- Barba Core -->
<script src="https://unpkg.com/@barba/core"></script>
<!-- GSAP for animation -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js"></script>
<script src="js/test.js"></script>
</body>
</html>
Вот CSS
html{
font-size: 62.5%;
height:100%;
}
body {
font-family:$body-font;
padding:0;
margin:0;
padding:1em;
color:#333;
height:100vh;
background-color:#F4F4F4;
}
ul{
list-style:none;
display:flex;
padding:0;
margin-right:auto;
}
a{
text-decoration:none;
color:#000;
}
li a{
margin-right:2em;
}
h1{
font-size:3em;
margin-top:1.5em;
}
.cta{
display:block;
padding:2em 2em 2em 0;
font-size:1.4em;
}
img{
width:100%;
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}
ul.transition{
display:flex;
position:absolute;
z-index:10;
height:100vh;
width:100%;
top:0;
left:0;
margin:0;
pointer-events:none;
}
ul.transition li{
transform: scaleY(0);
background:#fff;
width:20%;
}
@media (min-width:650px){
main{
display:flex;
margin-top:3em;
position:relative;
z-index:3;
}
.wrapper{
max-width:950px;
margin:0 auto;
}
.left{
padding-right:2em;
}
img{
width:400px;
}
.cta{
padding:1em;
background:#fff;
position:absolute;
z-index:21 !important;
width:80%;
animation-fill-mode:initial;
}
}
Наконец, js
function pageTransition() {
var tl = gsap.timeline();
tl.to('ul.transition li', { duration: .5, scaleY: 1, transformOrigin: "bottom left", stagger: .2});
tl.to('ul.transition li', { duration: .5, scaleY: 0, transformOrigin: "bottom left", stagger: .1, delay: .1});
}
function contentAnimation() {
var tl = gsap.timeline();
tl.from('.left', { duration: 1.5, translateY: 50, opacity: 0});
tl.to('img', { clipPath:"polygon(0 0, 100% 0, 100% 100%, 0 100%)"}, "-=1.1");
}
function delay(n) {
n = n || 2000;
return new Promise(done => {
setTimeout(() => {
done();
}, n);
});
}
barba.init({
sync: true,
transitions: [{
async leave(data) {
const done = this.async();
pageTransition();
await delay(1500);
done();
},
async enter(data) {
contentAnimation();
},
async once(data) {
contentAnimation();
}
}]
});
Я не встречал такого рода проблем, и, честно говоря, я понятия не имею, как почини это. Я предполагаю, что это имеет какое-то отношение к Барбе. js, возможно, к концу, но я не уверен.
Любая помощь будет принята с благодарностью.
Большое спасибо .