0

这是我在堆栈溢出社区的第一篇文章，我是初学者，经过一周的谷歌搜索，我决定在这里寻求帮助。我想做一个动画，屏幕被分成两个盒子，两个盒子的宽度都和屏幕一样，高度是屏幕高度的 50%（一个盒子放在另一个盒子上）。这两个框应该滚动，一个向下到屏幕底部，顶部一个到屏幕顶部（然后会有一个 Gmail 图标，它会像 div 一样打开。我试图在 adobe 中制作动画后效果并将其用作视频，但在其他设备上没有响应。所以我制作了图标的 SVG 并使用可卷起的 div，但它有两个主要问题。

  1. 2. 当 div 上下滚动时，你可以滚动屏幕，我不希望这样，我希望它是静态的。
  2. 当我查看移动视角时，结果发现第一个 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>

我只是不知道该怎么做，所以如果有人在这里看到解决方案或给我一个简单的提示，我将非常感激。

4

1 回答 1

0

Your transition need to be on the class that doesn't do the "change".

Nothing is executing your css() function. You can use a EventListener to execute your code on the load of your document like this :

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>

于 2021-02-27T09:37:08.340 回答