Wie animiere ich burgermenu - cross

Question

Ich habe angefangen mit CSS3 zu animieren.

Ich habe versucht, ein animiertes Burgermenu zu erstellen, aber das Ergebnis ist ein bisschen hässlich. Die oberen und unteren Balken übersetzen ein wenig nach rechts. Also ist die Rotationsanimation nicht wirklich glatt und richtig. Hier

ist das Ergebnis =>

Dies ist mein Code:

/* HTML */

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

/* CSS-Code */

#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

Vielleicht habe ich etwas falsch mit dem Übergang Ursprung ...

Ich weiß, dass es eine Menge Code-Beispiele bei jsfiddle etc. Aber ich will lernen, CSS-Animationen usw. korrekt. Also ich möchte verstehen, warum mein Code nicht gut ist und was ich besser sein sollte. Und wie CSS Animationen/CSS wirklich funktioniert.

Ich hoffe, du könntest mir helfen :) danke und habe einen guten Freitag.

Answer 1

Position die Balken, so dass sie in beiden Staaten in der gleichen Position relativ zu dem Elternteil sind, verwenden Sie dann 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>