CSS 导航栏从烤肉串过渡到 X
[英]CSS Navbar transition from Kebab to X
问题描述
Hey out there reading,
嘿，在外面读书，
to make my navbar looking fancier on mobile i wanted a Kebab that transforms into a X when clicking.为了让我的导航栏在移动设备上看起来更漂亮，我想要一个在点击时会变成 X 的烤肉串。 Unfortunately the transition isnt turning out that well probably because of my CSS settings of the Kebab.不幸的是，由于我对 Kebab 的 CSS 设置，过渡并没有那么顺利。 I already tried changing the width and the translate height still the problem remains.我已经尝试更改宽度和平移高度，但问题仍然存在。 You can watch the snippet to see the problem.您可以观看片段以查看问题。 Anyone knows a Solution for this?有谁知道这个的解决方案？
Thanks and have a great day谢谢，祝你有美好的一天
Noel诺埃尔
const navToggle = document.querySelector(".hamburger") navToggle.addEventListener("click", () => { const visibility = navToggle.getAttribute("aria-expanded"); if (visibility == "false"){ navToggle.setAttribute("aria-expanded", true); } else { navToggle.setAttribute("aria-expanded", false); } });
body { width: 100vw; height: 100vh; margin: 0; background: #000; overflow-x: hidden; } header { position: fixed; width: 100%; height: 5rem; z-index: 10000; padding: 0 2rem 5rem; display: flex; justify-content: space-between; align-items: center; }.hamburger { display: block; position: relative; z-index: 1; user-select: none; border: none; appearance: none; background: none; cursor: pointer; overflow: hidden; }.hamburger span { display: block; width: 4px; height: 4px; margin-bottom: 5px; background-color: #fff; border-radius: 6px; z-index: 1px; transform-origin: 0 0; transition: 0.4s; }.hamburger[aria-expanded="true"] span:nth-child(1) { width: 33px; transform: translateY(0px) rotate(45deg); transition-delay: 0.125s; }.hamburger[aria-expanded="true"] span:nth-child(2) { transform: translateX(40px); }.hamburger[aria-expanded="true"] span:nth-child(3) { width: 33px; transform: translateY(5px) rotate(315deg); transition-delay: 0.125s; }
<body> <header> <nav> <button aria-controls="primary-navbar" aria-expanded="false" class="hamburger"> <span></span> <span></span> <span></span> </button> </nav> </header> </body>
2 个解决方案
解决方案1
1 已采纳 2021-11-21 17:55:51
To .hamburger[aria-expanded="true"] span:nth-child(3) I have added translateX(-2px) .到.hamburger[aria-expanded="true"] span:nth-child(3)我添加了translateX(-2px) 。
const navToggle = document.querySelector(".hamburger") navToggle.addEventListener("click", () => { const visibility = navToggle.getAttribute("aria-expanded"); if (visibility == "false"){ navToggle.setAttribute("aria-expanded", true); } else { navToggle.setAttribute("aria-expanded", false); } });
body { width: 100vw; height: 100vh; margin: 0; background: #000; overflow-x: hidden; } header { position: fixed; width: 100%; height: 5rem; z-index: 10000; padding: 0 2rem 5rem; display: flex; justify-content: space-between; align-items: center; }.hamburger { display: block; position: relative; z-index: 1; user-select: none; border: none; appearance: none; background: none; cursor: pointer; overflow: hidden; }.hamburger span { display: block; width: 4px; height: 4px; margin-bottom: 5px; background-color: #fff; border-radius: 6px; z-index: 1px; transform-origin: 0 0; transition: 0.4s; }.hamburger[aria-expanded="true"] span:nth-child(1) { width: 33px; transform: translateY(0px) rotate(45deg); transition-delay: 0.125s; }.hamburger[aria-expanded="true"] span:nth-child(2) { transform: translateX(40px); }.hamburger[aria-expanded="true"] span:nth-child(3) { width: 33px; transform: translateY(5px) translateX(-2px) rotate(315deg); transition-delay: 0.125s; }
<body> <header> <nav> <button aria-controls="primary-navbar" aria-expanded="false" class="hamburger"> <span></span> <span></span> <span></span> </button> </nav> </header> </body>
解决方案2
1 2021-11-21 17:56:19
The main problem was with transform-origin: 0 0 + your margin-bottom.主要问题在于transform-origin: 0 0 + your margin-bottom。 Also the translateY on the last bar was a bad idea.最后一个小节上的 translateY 也是一个坏主意。
I managed to change some details and use absolute position to fix your problem, here is the result pen: https://codepen.io/camillewemajin/pen/YzxMrQJ我设法更改了一些细节并使用绝对 position 来解决您的问题，这是结果笔： https://codepen.io/camillewemajin/pen/YzxMrQJ
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.