我正在尝试在具有全屏图像的两个页面之间进行淡入淡出过渡。目前我正在尝试使用 swup 插件来实现这一点。
我可以通过在每个 html 上设置一个类来在每个页面上实现一个新的全屏图像，例如:
<!DOCTYPE html>
<html lang="en" class="home_bg">
<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">
<link rel="stylesheet" href="style.css">
<title>Home</title>
</head>
<body>
<nav>
<a href="/index.html">Home</a>
<a href="/about.html">About</a>
</nav>
</body>
</html>
和CSS:
*{
margin: 0;
padding: 0;
}
.home_bg {
background: url(img/landscape.jpg) no-repeat center center fixed;
background-size: cover;
}
.about_bg {
background: url(img/ocean.jpg) no-repeat center center fixed;
background-size: cover;
}
nav{
font-size: 24px;
}
转换的 HTML:
<!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 rel="stylesheet" href="style.css">
<title>Home</title>
</head>
<body>
<nav>
<a href="/index.html">Home</a>
<a href="/about.html">About</a>
</nav>
<main id="swup" class="transition-fade">
<h1>This is home</h1>
</main>
</body>
</html>
还有CSS:
*{
margin: 0;
padding: 0;
}
nav{
font-size: 24px;
}
.transition-fade{
opacity: 1;
transition: 500ms;
}
html.is-animating .transition-fade {
opacity: 0;
}
还有一行js用于转场:
const swup = new Swup();
我的问题是我似乎无法让这两个一起工作。我要么得到完整的图像页面，要么得到过渡，而不是带有过渡的完整图像页面。问题似乎在于图像必须在“swup”内。但是每次我尝试将我的图像放在那里时，我都无法控制它的大小和比例，即使我给它一个自己的类也是如此。
现在我已经尝试了无数的东西，我已经尝试用谷歌搜索了几天，但没有成功。我一直只使用 html、css 和 js 来处理这个。我应该寻找其他地方吗？
非常感谢此处的任何帮助。
谢谢
最佳答案
我终于设法解决了这个问题。这可能不是最好的解决方案，所以如果您有更好的解决方案，请告诉我们。
我在导航栏下方添加了这个 html 部分:
<main id="swup" class="transition-fade">
<div class="background-parent">
<div class="background-home"></div>
</div>
</main>
在 CSS 中:
.background-home {
width: 100%;
height: 100%;
background: url(img/landscape.jpg) no-repeat center center fixed;
background-size: cover;
}
关于javascript - 带动画过渡的整页图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58511801/