为什么我的 Swup 转换页面不起作用？答案

【问题标题】：Why my transition page with Swup doesn't work?为什么我的 Swup 转换页面不起作用？
【发布时间】：2020-04-30 17:50:53
【问题描述】：

我想使用https://swup.js.org/getting-started 进行页面转换，但在关注了这个 youtube 视频之后：

-https://www.youtube.com/watch?v=eVwH3VL1EsA&feature=emb_logo.

我的代码和视频完全一样，但是当我加载我的页面时它不起作用，我不明白为什么..

感谢您的帮助

const swup = new Swup();
import Swup from 'swup';

/*Swup Animation */ 

.transition-fade{
    opacity: 1;
    transition: 500ms;
    transform: translate(0);
    transform-origin: left;
}

html.is-animating .transition-fade{
    opacity: 0;
    transform: translateX(100%);
}

html.is-leaving .transition-fade{
    opacity: 0;
    transform: translateX(0);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script defer src="/node_modules/swup/dist/swup.min.js"></script>
    <script defer src="script.js"></script>
    <link href="styles.css" rel="stylesheet">
    <title>Home Page</title>
</head>
<body>
    <nav>
        <ul>
            <li><a href="Index.html" class="transition-fade">Home</a></li>
            <li><a href="pricing.html" class="transition-fade">Pricing</a></li>
            <li><a href="about.html" class="transition-fade">about</a></li>
        </ul>
    </nav>
    <main id="swup"  class="transition-fade">
        <h1>This is the Home page</h1>
    </main>
</body>
</html>

【问题讨论】：

嗨 Yannick，欢迎来到 SO。您的代码似乎正在发送错误。查找消息，您将找到解决方案。
谢谢，之前没看到你的留言！
有人找到解决方案了吗？

标签： javascript animation

【解决方案1】：

我遇到了同样的问题，但几分钟后我发现如果您的链接以 / 或 # 开头，则默认设置为 Swup 进行转换。所以你必须编辑你的链接：

href="Index.html" 
href="pricing.html"
href="about.html"

到：

href="/Index.html" 
href="/pricing.html"
href="/about.html"

【讨论】：