0

我刚刚开始使用 swup.js。我正在尝试自己实现它。一切顺利，但是当我点击一个链接时，它是动画但没有前进到下一页（链接页面）。它就停在那里。控制台说一些错误..请帮我清除它。我的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>SWUP</title>
    <link rel="stylesheet" href="style.css">
    <script src="swup.min.js"></script>
</head>
<body>
    <div class="container">
        <nav>
            <a href="/index.html">LOGO</a>
        </nav>

        <main id="swup" class="transition-fade section">
            <h1>This is Home Page</h1>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Autem eius nulla minus temporibus eaque rerum! Ipsum minima nulla dolore sapiente est reprehenderit ducimus corporis accusantium, laborum, vel aspernatur voluptatem dicta?</p>
            <a href="/page2.html" class="cta-btn">Go to 2nd Page</a>
        </main>
    </div>

    <script>
        const swup = new Swup(options);
    </script>
</body>
</html>

我的 CSS 是

*{
    margin:0;
    padding:0;
    font-family:sans-serif;
}
nav{
    padding: 25px 0;
    text-align: center;
}
a{
    text-decoration: none;
}
nav a{
    text-transform: uppercase;
    font-weight: bold;
    color:rgb(13, 145, 168);
    font-size:1.5em;
}
p{
    margin:25px 0;
}
.container{
    padding: 80px 40px;
}
.section{
    text-align: center;
    margin-bottom:50px;
}

.cta-btn{
    padding:15px 10px;
    margin-bottom:10px;
    background-color:#333;
    color:#fff;
}

.transition-fade{
    opacity:1;
    transition:.3s;
}

html.is-animating .transition-fade{
    opacity:0;
}

当我点击一个链接时，它只是淡出并且不会转到另一个链接的页面..我的控制台说

Uncaught DOMException: Failed to execute 'pushState' on 'History': A history state object with URL 'file:///D:/page2.html' cannot be created in a document with origin 'null' and URL 'file:///D:/swup/index.html'.
    at e (file:///D:/swup/swup.min.js:1:11385)
    at e (file:///D:/swup/swup.min.js:1:9842)
    at e [as loadPage] (file:///D:/swup/swup.min.js:1:10173)
    at e (file:///D:/swup/swup.min.js:1:6791)
    at HTMLDocument.<anonymous> (file:///D:/swup/swup.min.js:1:7482)

我究竟做错了什么。你能指出我的问题吗？

4

0 回答 0