Якорные ссылки не работают должным образом с Barba. js (v2) - PullRequest
Новая
       11

Якорные ссылки не работают должным образом с Barba. js (v2)

0 голосов
/ 26 марта 2020

У меня есть пример страницы, где я тестирую Барбу. 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, возможно, к концу, но я не уверен.

Любая помощь будет принята с благодарностью.

Большое спасибо .

...