如何使用swup.js进行链接页面转换
如何使用Swup.js和"/“链接属性动画页面转换？
你好，我使用Swup.js网页过渡动画为我的网站。但是，我不知道为什么我的链接的"/“属性不能工作。/subpage.html属性用于在不考虑"/“的情况下激活转换。实际上，代码试图到达subpage.html，但由于"/“而位于父文件夹中，而不是动画转换。
问题
然而，动画工作得很好，但转换效果不佳:我仍然处于“subpage.html.
- In”状态，没有在添加的/subpage.html".
中切换，当我使用Visual的本地实时服务器打开index.html时，转换不工作，我得到了错误“无法获得/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);中，以消除用于转换的"/“属性(只是为了知道是否可以工作)，但我没有成功:动画和trnasition没有出现.
我的代码
在这个例子中，按钮被链接到index.html，所以没有subpage.html，但是转换也不起作用。动画转换-淡出工作，但然后页面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>
谢谢！
回答 2
Stack Overflow用户
发布于 2019-11-16 10:45:39
你需要像这样在链接上放一个类。
<a href="/index.html" class="transition-fade">Go to other page</a>这也是一个很好的实践，你所有的脚本标签只是在关闭身体标签之上，而不是头部。
Stack Overflow用户
发布于 2020-03-01 21:22:24
您可能运行您的网站没有服务器(与文件协议，例如。file:// )，其中的swup不能工作，因为它无法发出请求。
让我们假设我们在URL https://example.com/subpage1/。以下链接将触发不同的位置：
https://example.com/index.html-到那个精确的URL./subpage2/-转到同一个站点，而确切的路径--https://example.com/subpage2/.subpage/--指向相同的站点，路径相对于当前的-https://example.com/subpage1/subpage2/
。
https://stackoverflow.com/questions/58086985
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号