Свуп анимации

Я использую swup для перехода между страницами, но на моем конкретном веб-сайте ничего не происходит. Я заставил его работать на простом двухстраничном HTML-примере веб-сайта, но сделать то же самое для моего портфолио не работает. Я уже несколько дней пытаюсь понять это и уже отчаялся.

Что я пробовал

  1. Используя ссылку на скрипт из unpkg.
  2. Создание полного стартового документа для установки Node на моем веб-сайте.
  3. Помещение единственной переменной const в отдельный документ и в сам файл HTML.
  4. Размещение тега 'main id="swup" class="transition-fade" только на той части моего веб-сайта, на которую я хочу указывать.
  5. Проверено, чтобы убедиться, что в моих классах CSS нет опечаток.
  6. Изменение источника файла, чтобы начать с./or/or none.

Что мне нужно

Я хочу сделать переход страницы из части портфолио моего веб-сайта, чтобы плавно переходить на следующую страницу.

Соответствующий код 

.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>

На моей следующей странице также есть все эти теги и скрипты.

Спасибо!

Источник

0 ответов

Другие вопросы по тегам