0
我創建了一個動畫菜單圖標，使用跨度及其之前和之後的CSS轉換：在僞元素之後。CSS菜單圖標轉換錯誤
當菜單圖標轉換爲活動狀態時，動畫效果很好。當圖標轉換回默認狀態時，圖標的中間條會在其他兩個條之間彈出。額外的像素在旋轉轉換髮生之前影響其他兩個條的位置，使動畫變得笨拙。
任何人都可以想到解決這個問題？
下面的代碼：
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>