Question

我有一个示例页面，其中正在测试Barba.js（v2）。我正在使用虚拟主机在本地构建此页面。我使用Barba.js进行的过渡似乎运行良好，但是我面临的问题是锚链接无法正常工作。例如，当我单击标题的“ ABOUT”菜单或图像旁边的“ ABOUT”按钮时，过渡开始，但是页面以某种方式自动重定向到首页。

这是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();
        }

      }]
    });

我还没有看到这种问题，老实说，我也不知道如何解决这个问题。我假设它与Barba.js有关，可能与后端有关，但我不确定。

任何帮助将不胜感激。

非常感谢您。

Answer 1

您需要通过将链接更改为index.html或about.html来测试您的链接。如果您关注在线Youtube视频以进行学习，建议您返回并重新观看以查看是否出错。

<nav>
    <ul>
       <li><a href="index.html">HOME</a></li>
       <li><a href="about.html">ABOUT</a></li>
     </ul>
</nav>

锚链接无法与Barba.js（v2）一起正常使用

1 个答案: