当链接被点击的元素正在动画并停止时

如何解决当链接被点击的元素正在动画并停止时

我刚刚开始使用 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)

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

当链接被点击的元素正在动画并停止时

如何解决当链接被点击的元素正在动画并停止时

相关推荐