这是我在堆栈溢出社区的第一篇文章，我是一个初学者，经过一周的谷歌搜索，我决定在这里寻求帮助。我想制作一个动画，其中屏幕分为两个框，两者都具有与屏幕相同的宽度和屏幕高度的50%(一个框在另一个框上)。这两个方框应该滚动，一个下到屏幕底部，一个上到屏幕顶部(然后会有一个Gmail图标，就像div一样打开)。我尝试在adobe after effects中制作动画并将其用作视频，但它在其他设备上没有响应。所以我制作了一个图标的svg，并使用可以卷起的div，但它有两个主要问题。
- 2。当div上下滚动时，你可以滚动屏幕我不希望那样，我希望它是静态的。
- 当我看移动视角的时候发现它很糟糕第一个div还可以但是第二个div滚动到中间并停在那里
这是我试过的代码，我已经尽力了。
body {
align-items: center;
background-color: #f1f2f1;
height: 100vh;
max-height: 100vh;
justify-content: center;
margin: 0;
}
/*divs*/
.divko1 {
transition: height 2s ease;
height: 0 !important;
}
.divko2 {
transition: margin 2s ease;
margin-top: 50% !important;
}
#div1 {
background-color: #1A4335;
height: 50%;
width: 100vw;
}
#div2 {
margin: 0%;
background-color: #BA4335;
height: 50%;
width: 100vw;
}
/*icons*/
.icons {
position: absolute;
left: 50%;
transform: translateX(-50%) translateY(-50%);
width: 11em;
height: 10em;
}
/*content*/
#content {
visibility: hidden;
}
#content * {
display: flex;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Maily na prenajom</title>
<link href="./style.css" type="text/css" rel="stylesheet">
</head>
<body style="margin: 0;">
<div id="div1"></div>
<img style="margin-top:1.6em;" class="icons" src="/test/vrch.svg" alt="top of gmail icon">
<img style="margin-top:3.7em;" class="icons" src="/test/spodok.svg" alt="bottom of gmail icon">
<div id="div2"></div>
<div id="content">
<!-- content belongs here -->
</div>
<script>
const div1 = document.getElementById("div1");
const div2 = document.getElementById("div2");
function css() {
div1.classList.add("divko1");
div2.classList.add("divko2");
setTimeout(remove, 1800);
}
function remove() {
div1.remove();
div2.remove();
button.remove();
document.getElementById("content").style.visibility = "visible";
css()
}
</script>
</body>
</html>我只是不知道该怎么做了，所以如果有人在这里看到一个解决方案或一个简单的提示，我将非常感谢。
您的transition需要在不做"更改"的类上。
没有任何东西在执行css()函数。你可以使用EventListener在加载文档时执行代码，如下所示:
document.addEventListener("DOMContentLoaded", function(){
//code
});
document.addEventListener("DOMContentLoaded", function() {
const div1 = document.getElementById("div1");
const div2 = document.getElementById("div2");
div1.classList.add("divko1");
div2.classList.add("divko2");
// disable overflow during animation
document.body.style.overflow = "hidden";
setTimeout(remove, 1800);
function remove() {
div1.remove();
div2.remove();
document.body.style.overflow = "scroll";
document.getElementById("content").style.visibility = "visible";
}
});body {
align-items: center;
background-color: #f1f2f1;
height: 100vh;
max-height: 100vh;
justify-content: center;
margin: 0;
}
/*divs*/
.divko1 {
height: 0 !important;
}
.divko2 {
margin-top: 50% !important;
}
#div1 {
background-color: #1A4335;
height: 50%;
width: 100vw;
transition: height 2s ease;
}
#div2 {
margin: 0%;
background-color: #BA4335;
height: 50%;
width: 100vw;
transition: margin 2s ease;
}
/*icons*/
.icons {
position: absolute;
left: 50%;
transform: translateX(-50%) translateY(-50%);
width: 11em;
height: 10em;
}
/*content*/
#content {
visibility: hidden;
}
#content * {
display: flex;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Maily na prenajom</title>
<link href="./style.css" type="text/css" rel="stylesheet">
</head>
<body style="margin: 0;">
<div id="div1"></div>
<img style="margin-top:1.6em;" class="icons" src="/test/vrch.svg" alt="top of gmail icon">
<img style="margin-top:3.7em;" class="icons" src="/test/spodok.svg" alt="bottom of gmail icon">
<div id="div2"></div>
<div id="content">
<!-- content belongs here -->
</div>
</body>
</html>