[英]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.