1

我正在使用 swup 进行页面转换，但我的特定网站没有任何反应。我让它在一个简单的两页 HTML 示例网站上工作，但对我的投资组合做完全相同的事情是行不通的。几天来我一直在努力解决这个问题，但我越来越绝望。

我试过的

  1. 使用来自 unpkg 的脚本链接。
  2. 创建一个完整的启动文档以在我的网站上安装 Node。
  3. 将单个 const 变量放在单独的文档和 HTML 文件本身中。
  4. 仅将 'main id="swup" class="transition-fade' 标签放在我希望它指向的网站的一部分上。
  5. 检查以确保我的 CSS 类没有拼写错误。
  6. 将文件源更改为以 ./或/或无开头。

我需要的

我想从我的网站的投资组合部分进行页面转换，以淡入到下一页。

相关代码

.transition-fade {
  opacity: 1;
  transition: .5s;
}

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">
  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@500&family=Russo+One&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="/CSS/style.css">
  <link id="theme-style" rel="stylesheet" href="">

  <script defer src="/app.js"></script>
  <script defer src="https://use.fontawesome.com/releases/v5.13.1/js/all.js"></script>
  <script defer src="/index.js" type="text/javascript"></script>
  <script defer src="/node_modules/swup/dist/swup.min.js"></script>
  <script defer>
    const swup = new Swup();
  </script>
  <title>Kim Lachance</title>
  </section>

  <main id="swup" class="transition-fade">
    <section id="post-section" class="s1">
      <div class="main-container">
        <h3 style="text-align: center;">Some of my projects</h3>
        <div class="post-wrapper">

          <div>
            <div class="post">
              <img class="thumbnail" src="./images/tindog.sr.png" alt="">
              <div class="post-preview">
                <h6 class="post-title">Tindog</h6>
                <p class="post-intro">Fictional dog dating app website made with a Bootstrap framework</p>
                <a href="/tindog.html">Visit</a>
              </div>
            </div>
          </div>
          <div>
            <div class="post">
              <img class="thumbnail" src="./images/omnifood.sr.png" alt="">
              <div class="post-preview">
                <h6 class="post-title">Omnifood</h6>
                <p class="post-intro">Fictional food delivery app website made with HTML, CSS and jQuery</p>
                <a href="#">Visit</a>
              </div>
            </div>
          </div>
          <div>
            <div class="post">
              <img class="thumbnail" src="./images/klmedia.sr.png" alt="">
              <div class="post-preview">
                <h6 class="post-title">KL Media</h6>
                <p class="post-intro">Website for my own freelancer marketing company</p>
                <a href="#">Visit</a>
              </div>
            </div>
          </div>
          <div>
            <div class="post">
              <img class="thumbnail" src="./images/drumkit.sr.png" alt="">
              <div class="post-preview">
                <h6 class="post-title">Drumkit Javascript</h6>
                <p class="post-intro">An exercise I built to flex my javascript muscles</p>
                <a href="#">Visit</a>
              </div>
            </div>
          </div>
          <div>
            <div class="post">
              <img class="thumbnail" src="./images/dicee.sr.png" alt="">
              <div class="post-preview">
                <h6 class="post-title">Dicee Game Javascript</h6>
                <p class="post-intro">An exercise I built to flex more javascript muscles</p>
                <a href="#">Visit</a>
              </div>
            </div>
          </div>

        </div>
      </div>
    </section>
  </main>

我的下一页也有所有这些标签和脚本。

谢谢！

4

0 回答 0