Я хотел бы использовать 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>