带有动画过渡的整页图像答案

【问题标题】：full page image with animated transition带有动画过渡的整页图像
【发布时间】：2020-02-19 01:09:53
【问题描述】：

我正在尝试在具有全屏图像的两个页面之间进行淡入淡出过渡。目前我正在尝试使用 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。我应该去别处看看吗？

非常感谢这里的任何帮助。

谢谢

【问题讨论】：

嗨，你能用 js fiddle 制作minimal reproducible example 吗？
问题已更新

标签： javascript html css image css-transitions

【解决方案1】：

我终于设法解决了这个问题。这可能不是最好的解决方案，所以如果您有更好的解决方案，请告诉我们。

我在导航栏下方添加了这个 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;
}

【讨论】：