Question

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

Answer 1

我遇到了同样的问题，但是几分钟后，我发现如果您的链接以/或＃开头，则默认情况下Swup设置为执行转换。因此，您必须从以下位置编辑链接：

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

收件人：

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

为什么我的Swup过渡页面不起作用？

1 个答案: