如何動畫burgermenu - 交叉

Question

我已經開始使用CSS3進行動畫製作。

我試圖創建一個動畫burgermenu，但結果是有點醜。 頂部和底部的小節向右平移一點。所以旋轉動畫並非真正平滑和正確。

下面是結果 =>

這是我的代碼：

/* HTML */

<div id="burger"> 
    <span id="burgerTop" class="burgerLineTop"></span> 
    <span id="burgerCenter" class="burgerLineCenter"></span> 
    <span id="burgerBottom" class="burgerLineBottom"></span> 
</div> 

/* CSS代碼*/

#burger { 
    position: absolute; 
    margin: 50px; 
} 

.burgerLineTop { 
    width: 50px; 
    height: 5px; 
    background: black; 
    position: absolute; 
} 

.burgerLineCenter { 
    width: 50px; 
    height: 5px; 
    background: black; 
    position: absolute; 
    top: 15px; 
} 

.burgerLineBottom { 
    width: 50px; 
    height: 5px; 
    background: black; 
    position: absolute; 
    top: 30px; 
} 

.burgerLineTopAnimation { 
    transform-origin: 0 0; 
    transition: all 500ms ease-in-out; 
    transform: rotate(45deg); 
} 

.burgerLineCenterAnimation { 
    transition: all 500ms ease-in-out; 
    opacity: 0; 
} 

.burgerLineBottomAnimation { 
    transform-origin: 0 0; 
    transition: all 500ms ease-in-out; 
    transform: rotate(-45deg); 
} 

/* JS */

var burgermenu = document.querySelector('#burger'); 

burgermenu.addEventListener('click', function() { 
    var burgerTop = document.querySelector('#burgerTop'); 
    var burgerCenter = document.querySelector('#burgerCenter'); 
    var burgerBottom = document.querySelector('#burgerBottom'); 
    var burgerTopCL = burgerTop.classList; 
    var burgerCenterCL = burgerCenter.classList; 
    var burgerBottomCL = burgerBottom.classList; 

    burgerTopCL.contains('burgerLineTopAnimation') ? burgerTopCL.remove('burgerLineTopAnimation') : burgerTopCL.add('burgerLineTopAnimation'); 
    burgerCenterCL.contains('burgerLineCenterAnimation') ? burgerCenterCL.remove('burgerLineCenterAnimation') : burgerCenterCL.add('burgerLineCenterAnimation'); 
    burgerBottomCL.contains('burgerLineBottomAnimation') ? burgerBottomCL.remove('burgerLineBottomAnimation') : burgerBottomCL.add('burgerLineBottomAnimation'); 
}); 

jsfiddle

也許我犯了一些錯誤的過渡起源......

我知道，有很多在的jsfiddle等代碼的例子，但我想學習CSS動畫等正確。所以我想明白爲什麼我的代碼不好，我應該更好。以及css動畫/ css如何真正起作用。

我希望你能幫助我:) 謝謝，並有一個良好的星期五。

Answer 1

位置吧所以他們對於在這兩個州的父母在相同的位置，然後用transform-origin: 50%

var burgermenu = document.querySelector('#burger'); 
 

 
burgermenu.addEventListener('click', function() { 
 
\t var burgerTop = document.querySelector('#burgerTop'); 
 
\t var burgerCenter = document.querySelector('#burgerCenter'); 
 
\t var burgerBottom = document.querySelector('#burgerBottom'); 
 
\t var burgerTopCL = burgerTop.classList; 
 
\t var burgerCenterCL = burgerCenter.classList; 
 
\t var burgerBottomCL = burgerBottom.classList; 
 

 
\t burgerTopCL.contains('burgerLineTopAnimation') ? burgerTopCL.remove('burgerLineTopAnimation') : burgerTopCL.add('burgerLineTopAnimation'); 
 
\t burgerCenterCL.contains('burgerLineCenterAnimation') ? burgerCenterCL.remove('burgerLineCenterAnimation') : burgerCenterCL.add('burgerLineCenterAnimation'); 
 
\t burgerBottomCL.contains('burgerLineBottomAnimation') ? burgerBottomCL.remove('burgerLineBottomAnimation') : burgerBottomCL.add('burgerLineBottomAnimation'); 
 
});

#burger { 
 
    position: absolute; 
 
    margin: 50px; 
 
    height: 50px; 
 
    border: 1px dashed #999; 
 
    width: 50px; 
 
} 
 

 
.burgerLineTop { 
 
    top: 7.5px; 
 
} 
 

 
.burgerLineCenter { 
 
    top: 22.5px; 
 
} 
 

 
.burgerLineBottom { 
 
    top: 37.5px; 
 
} 
 

 
#burger span { 
 
    height: 5px; 
 
    background: black; 
 
    position: absolute; 
 
    width: 100%; 
 
    transition: all 500ms ease-in-out; 
 
} 
 

 
.burgerLineTopAnimation { 
 
    transform: rotate(45deg); 
 
} 
 

 
.burgerLineCenterAnimation { 
 
    opacity: 0; 
 
} 
 

 
.burgerLineBottomAnimation { 
 
    transform-origin: 0 0; 
 
    transform: rotate(-45deg); 
 
} 
 

 
.burgerLineBottomAnimation, .burgerLineTopAnimation { 
 
    transform-origin: center; 
 
    top: 50%; 
 
}

<div id="burger"> 
 
    <span id="burgerTop" class="burgerLineTop"></span> 
 
    <span id="burgerCenter" class="burgerLineCenter"></span> 
 
    <span id="burgerBottom" class="burgerLineBottom"></span> 
 
</div>