burgermenuをアニメートする方法 - クロス

Question

私はCSS3でアニメーションを開始しました。

私はアニメ化されたバーガーメニューを作成しようとしましたが、結果は少し醜いです。 上部と下部のバーはちょっと右に翻訳されています。したがって、回転アニメーションは実際には滑らかで適切なものではありません。ここで

が結果 =>

ですこれは私のコードです：

/* 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などのコード例がたくさんあることを知っている

を作ったしかし、私は、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>