文章/答案/技术大牛

发布

社区首页 >问答首页 >为什么我的Swup过渡页面不能工作？

问为什么我的Swup过渡页面不能工作？
EN

Stack Overflow用户

提问于 2020-01-14 09:27:54

回答 1查看 779关注 0票数 0

我想使用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>

javascript

animation

回答 1

Stack Overflow用户

发布于 2020-10-27 05:12:49

我也有同样的问题，但几分钟后我发现，如果你的链接以/或#开头，Swup默认设置为进行转换。因此，您必须从以下位置编辑链接：

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

至：

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/59726401

复制

相似问题

问为什么我的Swup过渡页面不能工作？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么我的Swup过渡页面不能工作？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么我的Swup过渡页面不能工作？
EN