CSS菜单图标转换错误
[英]CSS Menu Icon Transformation Bug
问题描述
I'm creating an animated menu icon using CSS transformations on a span and its :before and :after pseudo-elements. 
我正在使用跨度上的CSS转换及其：before和：after伪元素创建一个动画菜单图标。
When the menu icon transitions into the active state, the animation works perfectly. 当菜单图标转换为活动状态时，动画将完美运行。 When the icon transitions back into its default state, the icon's middle bar pops back into existence between the other two bars. 当图标转换回其默认状态时，图标的中间栏会弹出，重新出现在其他两个栏之间。 The additional pixels affect the positioning of the other two bars before the rotation transition occurs, making the animation awkward. 附加像素会影响旋转过渡发生之前其他两个条的位置，从而使动画尴尬。
Can anyone think of a fix for this problem? 谁能想到解决此问题的方法？
Here's the code: 这是代码：
document.querySelector("#nav-toggle").addEventListener("click", function() { this.classList.toggle("active"); });
#nav-toggle { display: block; width: 80px; padding: 0px 15px; line-height: 61px; color: #fff; background-color: #333; text-align: right; } #nav-toggle span { top: 36px; } #nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { cursor: pointer; border-radius: 1px; height: 4px; width: 25px; background: white; position: absolute; display: block; content: ''; transition: all 500ms ease-in-out; } #nav-toggle span:before { top: -8px; } #nav-toggle span:after { top: 8px; } #nav-toggle.active span { background-color: transparent; top: 36px; } #nav-toggle.active span:before, #nav-toggle.active span:after { top: 0px; } #nav-toggle.active span:before { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } #nav-toggle.active span:after { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
<body> <div> <a href="#" id="nav-toggle"><span></span>MENU</a> </div> </body>
1 个解决方案
解决方案1
1 已采纳 2017-04-10 00:21:44
Change the code to 将代码更改为
#nav-toggle span:before {
top: -8px;
}
#nav-toggle span:after {
top: 8px;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.