滑下一個div並隱藏它，好像它不存在
[英]Sliding down a div and hiding it, as if it does not exist
問題描述
我試圖在 2 秒的時間間隔后向下滑動這個“.preloader”div，並嘗試使用 JQUERY，但我不知道為什么它不起作用。 另外，我不想有一個切換按鈕。 我嘗試使用@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>
正如您在代碼段中看到的，當 div 向下滑動時，它會在主體的主要部分下方創建空間。
1 個解決方案
解決方案1
0 2021-06-22 20:09:08
不是平移元素，這意味着它仍然具有高度，因此當它向下消失時你會得到一個滾動條，你可以在 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>
當我嘗試使用 jQuery UI 隱藏它時，為什么 div 在滑動之前會向下移動？
[英]Why does the div move down before sliding when I try to hide it with jQuery UI?
在網格中向下滑動div的底部，而不滑動整個行。
[英]Sliding down the bottom of a div in a grid, without sliding the entire row.
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.