【问题标题】：How to make linked page transition with swup.js如何使用 swup.js 进行链接页面转换
【发布时间】：2020-01-24 23:20:31
【问题描述】：

如何使用 Swup.js 和“/”链接属性动画页面过渡？

您好，我正在使用 Swup.js 为我的网站制作页面过渡动画。但是，我不知道为什么我的链接的“/”属性不起作用。 /subpage.html 属性用于在单击时为过渡设置动画它看起来像“/”没有考虑在内。实际上，由于“/”，代码试图到达 subpage.html 但在父文件夹中，而不是动画过渡。

问题

但是，动画效果很好，但过渡效果不佳：我仍在我的 "index.html" 上，并且没有在我的 subpage.html 中切换。李>
此外，当我从 Visual Studio 使用本地实时服务器打开 index.html 时，转换不起作用，并且出现错误 "Cannot GET /subpage.html "。

我尝试过的

听从 https://swup.js.org/common-issues 和 https://github.com/swup/swup/issues/30 的帮助，但都没有成功。
在我的 javascript 中更改了 Swup() 的选项参数。我将let options = {LINK_SELECTOR: 'a',debugMode: true,}; 添加到const swup = new Swup(options); 以摆脱过渡的“/”属性（只是想知道我是否可以让它工作），但我没有成功：动画和翻译没有出现......

我的代码

对于本例，按钮链接到 index.html，因此没有 subpage.html，但转换也不起作用。动画 transition-fade 有效，但页面 index.html 不再显示。

body{
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
}
a{
    text-decoration: none;
}
.container{
    width: 80%;
    margin: 0 auto;
}

nav {
    background: rgb(255,0,0);
    padding: .5em;
}
nav a{
    font-weight: bold;
    color: white;
}

main{
    width: 80%;
    margin: 5em auto;
}
main a{
    display: inline-block;
    background: red;
    color: white;
    padding: .8em;
    margin-top: 2em;
}


/* Swup Animation */
.transition-fade {
    transition: 0.4s;
    opacity: 1;
  }
  
html.is-animating .transition-fade {
    opacity: 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-UAV-Compatible" content="ie=edge">
    <title>SWUPE test</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://unpkg.com/swup@latest/dist/swup.min.js"></script>  
</head>

<body>
    <div class="container">
        <nav>
            <a href="#">company</a>
        </nav>
        <main id="swup" class="transition-fade">
            <h1>Home page here</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda quasi reprehenderit non corrupti quae quis facilis natus veniam quas quibusdam? Provident voluptates nemo excepturi corporis saepe obcaecati sapiente, quas culpa!</p>
            <a href="/index.html">Go to other page</a>
        
        </main>
    </div>

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

</body>
</html>

谢谢！

【问题讨论】：

标签： javascript html css visual-studio-code

【解决方案1】：

你需要像这样在链接上放一个类。

<a href="/index.html" class="transition-fade">Go to other page</a>

此外，最好将所有脚本标记放在结束正文标记上方而不是头部。

【讨论】：

【解决方案2】：

您可能在没有服务器的情况下运行您的网站（使用文件协议，例如 URL 中的file://），因为 swup 无法发出请求，因此无法正常工作。

假设我们位于 URL https://example.com/subpage1/。以下链接会触发不同的位置：

https://example.com/index.html - 转到那个确切的 URL。
/subpage2/ - 转到同一站点和确切路径 - https://example.com/subpage2/。
subpage/ - 转到相对于当前的相同站点和路径 - https://example.com/subpage1/subpage2/

【讨论】：