[英]How do I use fade-in/ease-in-out/or any animation to smooth out the revealing of my HTML, CSS and JS navigation menu?
我正在練習 JS 和 CSS 動畫，由於某種原因，當“菜單”元素使用絕對位置時，我無法啟用動畫。 有沒有辦法在css3或Js中使用transition來實現平滑的滑動效果？
我嘗試了很多在線教程，但都沒有奏效。
這是codepen鏈接： https ://codepen.io/mithunbaiju/pen/XWrMqaG
$("button#toggle-button").click(function(){ $("#toggle-button").toggleClass("toggler toggler-closed-active"); $("#main-navigation").toggleClass("site-nav site-nav-toggled"); }); $("button#toggle-button-closed").click(function(){ $("#toggle-button-closed").toggleClass("toggler-closed-active toggler"); $("#main-navigation").toggleClass("site-nav-toggled site-nav"); });
html, * { margin: 0; padding: 0; } html { font-size: 10px; } body { font-family: 'Nunito', sans-serif; font-size: 1.6rem; line-height: 1.625; } input [type="submit"], button{ cursor: pointer; padding: 1.5rem; background-color: darkviolet; border-radius: 4px; } button:focus { outline: none; } .mast-head { background-color: #013243; } .wrap { padding: 2.5rem; display: flex; justify-content: space-between } .site-branding a{ text-decoration: none; color: ghostwhite; font-weight: bolder; } #main-navigation { position: absolute; background: black; top: 0; left: 0; width: 100%; display: flex; list-style-type: none; flex-direction: column; height: 100%; } .site-nav { transform: translateX(-100vw); transition: all .2s linear; } .site-nav-toggled { transform: translateX(0px); } .site-nav a{ color: whitesmoke; text-decoration: none; } #toggle-button { border: 0px; color: whitesmoke; font-weight: bold; } .toggler-closed { display: none; } .toggler-closed-active { display: absolute; top: 2.5rem; right: 2.5rem; z-index: 2; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Menu Practice</title> <link rel="stylesheet" href="style.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://fonts.googleapis.com/css?family=Nunito:400,400i,600,600i,700,700i&display=swap" rel="stylesheet"> </head> <body> <header id="site-header" class="mast-head"> <div class="wrap"> <div class="site-branding"> <a href="#">Site Logo</a> </div> <button id="toggle-button" class="toggler">Menu +</button> <button id="toggle-button-closed" class="toggler-closed">Close +</button> <ul id="main-navigation" class="site-nav"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Resources</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Resourves</a></li> </ul> </div> </header> <script src="app.js"></script> </body> </html>
任何幫助，將不勝感激。
提前致謝。
您可以簡單地添加一個關鍵幀來制作動畫並在 body 標簽上應用該類。
淡入淡出類示例：-
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
animation-duration: 5s;
}
我認為， w3schools在這里可以提供很多幫助。 不要着急，花點時間了解css動畫屬性。 掌握它大約需要一個小時，但是當你掌握它時，使用它會非常有趣。 我幾天前才弄明白，你真的可以讓東西看起來很漂亮。 我希望有所幫助。
你的 css 轉換在 .site-nav 上而不是在 .site-nav-toggled 上，切換多個類不起作用，使用 addClass/removeClass 到 #main-navigation 而不是切換多個類，你應該學習 chrome Devtools。
如何在Java腳本上實現淡入動畫，例如CSS上的Easy-in-out？
[英]How to implement fade-in-out animation on java-script like ease-in-out on css?
如何使用jquery和css3實現* SMOOTH *在移動設備上淡入淡出動畫？
[英]how to achieve *SMOOTH* fade in and out animation on mobile with jquery and css3?
菜單導航：能夠淡入但不確定如何在關閉時淡出（Tailwind CSS 和 Vanilla JS）
[英]Menu Navigation: Able to fade in but not sure how to fade out on close (Tailwind CSS & Vanilla JS)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.