滑下一个div并隐藏它，好像它不存在

Question

I was trying to slide down this ".preloader" div down, after time interval of 2 seconds, and tried JQUERY, but I couldn't figure out why it was not working.我试图在 2 秒的时间间隔后向下滑动这个“.preloader”div，并尝试使用 JQUERY，但我不知道为什么它不起作用。 Also, I didn't want to have a toggle button.另外，我不想有一个切换按钮。 I tried to create an animation with @keyframes, but as soon as the div goes out of the boundaries of the page, a scrollbar is shown, which you could use to scroll down and see that actually the div is placed underneath the html page.我尝试使用@keyframes 创建动画，但是一旦 div 超出页面边界，就会显示一个滚动条，您可以使用它向下滚动并查看 div 是否实际上位于 html 页面下方。 ` `

 * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "Poppins", sans-serif; min-height: 100vh; display: flex; align-items: center; justify-content: center; perspective: 1000px; background-image: url('background_image_one.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; background-position: center; } .container { width: 50%; display: flex; justify-content: center; align-items: center; } .card { transform-style: preserve-3d; background-color: rgba(0, 0, 0, 0.5); border: white; border-style: solid; min-height: 60vh; width: 35rem; border-radius: 30px; padding: 0rem 5rem; box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2), 0px 0px 50px rgba(0, 0, 0, 0.2); } .avatar { min-height: 35vh; display: flex; align-items: center; justify-content: center; } .avatarimg { width: 40rem; z-index: 2; transition: all 0.75s ease-out; } .info h1 { font-size: 3rem; transition: all 0.75s ease-out; display: flex; justify-content: center; color: white; } .info h3 { font-size: 1.3rem; padding: 2rem 0rem; color: #585858; font-weight: lighter; transition: all 0.75s ease-out; } .sizes { display: flex; justify-content: space-evenly; transition: 0.5s ease-out; padding-bottom: 2rem; } .sizes button { /* padding: 0.5rem 2rem; */ box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2); cursor: pointer; font-weight: bold; width: 100%; padding: 1rem 0rem ; background: #f54642; border: none; color: white; border-radius: 30px; font-weight: bolder; margin: 1rem; } button.active { background: #585858; color: white; } .purchase { margin-top: 5rem; transition: all 0.75s ease-out; } /* тука са моите бутони */ input[type="text"], input[type="password"] { border: none; border-bottom: 0px; background: rgba(255, 255, 255, 0.2); color: whitesmoke; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; outline: none; height: 40px; width: 100%; font-size: 16px; transition: all 0.75s ease-out; } .forminput p { font-size: 18px; color: white; } .forminput { padding-bottom: 3rem; } .preloader { background: #000823 url("bold-preloader.gif") no-repeat center center; min-height: 100vh; height: 100vh; width: 100%; position: fixed; z-index: 100; animation: slide 4s ease-out forwards; } @keyframes slide{ 0% {} 50%{ transform: translateY(0px); overflow: hidden;} 100%{ transform: translateY(100vh); overflow: hidden; } }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>3d Card Effect</title> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet"> <link rel="stylesheet" href="./style.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> </head> <body> <div class="preloader"> </div> <div class="container"> <div class="card"> <div class="avatar"> <div class="circle"></div> <img src="./userAvatar.png" alt="avatarimg" class="avatarimg"> </div> <div class="info"> <h1 class="title">Log In</h1> <div class="forminput"> <p>Email:</p> <input type="text" name="" placeholder=""> <p>Password:</p> <input type="password" name="" placeholder=""> </div> </div> <div class="sizes"> <button>Login</button> <button>Register</button> </div> </div> </div> </div> <script src="./app.js"></script> </body> </html>

As you can see on the snippet, when the div is sliding down, it creates space underneath the main part of the body.正如您在代码段中看到的，当 div 向下滑动时，它会在主体的主要部分下方创建空间。

Answer 1

Instead of translating the element, which means it still has height so you get a scroll bar as it disappears downwards, you could scale to 0 in the Y direction, having changed the transform-origin of the Y to the bottom of the page:不是平移元素，这意味着它仍然具有高度，因此当它向下消失时你会得到一个滚动条，你可以在 Y 方向缩放到 0，将 Y 的变换原点更改为页面底部：

 * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "Poppins", sans-serif; min-height: 100vh; display: flex; align-items: center; justify-content: center; perspective: 1000px; background-image: url('background_image_one.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; background-position: center; } .container { width: 50%; display: flex; justify-content: center; align-items: center; } .card { transform-style: preserve-3d; background-color: rgba(0, 0, 0, 0.5); border: white; border-style: solid; min-height: 60vh; width: 35rem; border-radius: 30px; padding: 0rem 5rem; box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2), 0px 0px 50px rgba(0, 0, 0, 0.2); } .avatar { min-height: 35vh; display: flex; align-items: center; justify-content: center; } .avatarimg { width: 40rem; z-index: 2; transition: all 0.75s ease-out; } .info h1 { font-size: 3rem; transition: all 0.75s ease-out; display: flex; justify-content: center; color: white; } .info h3 { font-size: 1.3rem; padding: 2rem 0rem; color: #585858; font-weight: lighter; transition: all 0.75s ease-out; } .sizes { display: flex; justify-content: space-evenly; transition: 0.5s ease-out; padding-bottom: 2rem; } .sizes button { /* padding: 0.5rem 2rem; */ box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2); cursor: pointer; font-weight: bold; width: 100%; padding: 1rem 0rem ; background: #f54642; border: none; color: white; border-radius: 30px; font-weight: bolder; margin: 1rem; } button.active { background: #585858; color: white; } .purchase { margin-top: 5rem; transition: all 0.75s ease-out; } /* тука са моите бутони */ input[type="text"], input[type="password"] { border: none; border-bottom: 0px; background: rgba(255, 255, 255, 0.2); color: whitesmoke; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; outline: none; height: 40px; width: 100%; font-size: 16px; transition: all 0.75s ease-out; } .forminput p { font-size: 18px; color: white; } .forminput { padding-bottom: 3rem; } .preloader { background: #000823 url("bold-preloader.gif") no-repeat center center; min-height: 100vh; height: 100vh; width: 100%; position: fixed; z-index: 100; animation: slide 4s ease-out forwards; } @keyframes slide{ 0% {} 50%{ transform: scaleY(1); overflow: hidden; } 100%{ transform: scaleY(0); transform-origin: 0 100vh; overflow: hidden; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>3d Card Effect</title> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet"> <link rel="stylesheet" href="./style.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> </head> <body> <div class="preloader"> </div> <div class="container"> <div class="card"> <div class="avatar"> <div class="circle"></div> <img src="./userAvatar.png" alt="avatarimg" class="avatarimg"> </div> <div class="info"> <h1 class="title">Log In</h1> <div class="forminput"> <p>Email:</p> <input type="text" name="" placeholder=""> <p>Password:</p> <input type="password" name="" placeholder=""> </div> </div> <div class="sizes"> <button>Login</button> <button>Register</button> </div> </div> </div> </div> <script src="./app.js"></script> </body> </html>

滑下一个div并隐藏它，好像它不存在

问题描述

1 个解决方案

解决方案1
0 2021-06-22 20:09:08

滑下一个div并隐藏它，好像它不存在

问题描述

1 个解决方案

解决方案1 0 2021-06-22 20:09:08

解决方案1
0 2021-06-22 20:09:08