メニューを変更する流星のアイコン

Question

私は流星のプラットフォームを使用しています。今私はメニューアイコンをアニメーションしようとしますが、何も変わりません。

HTML：

<template name="header"> 
<div class="container"> 
    <div class="btn-menu"> 
    <span class="bar1"></span> 
    <span class="bar2"></span> 
    <span class="bar3"></span> 
    <span>menu</span> 
    </div> 
</div> 
</template> 

CSS：

.btn-menu { 
    float: right; 
    width: 31px; 
    height:32px; 
    position: relative; 
    transform : rotate(0deg); 
    transition-duration: 0.5s; 
    transition-timimg-function: ease-in-out; 
    cursor: pointer; 
    margin: 6px 7px 0 40px; 
} 

.btn-menu span { 
    display: block; 
    position: absolute; 
    height: 4px; 
    width: 100%; 
    background-color: rgb(88, 89, 91); 
    left: 0; 
    transform : rotate(0deg); 
    transition-duration: 0.25s; 
    transition-timimg-function: ease-in-out; 
} 

.btn-menu span:nth-child(1){ 
    top: 0; 
    tansform-origin: left center; 
} 

.btn-menu span:nth-child(2){ 
    top: 9px; 
    tansform-origin: left center; 
} 

.btn-menu span:nth-child(3){ 
    top: 18px; 
    tansform-origin: left center; 
} 

.btn-menu span:nth-child(4){ 
    top: 26px; 
    text-transform: uppercase; 
    background-color: rgb(255, 255, 255); 
    font-weight: bold; 
    font-size: 11px; 
    tansform-origin: left center; 
} 

.change .bar1{ 
    transform: rotate(-45deg) translate(-9px, 6px); 
} 

.change .bar2{ 
    opacity:0; 
} 

.change .bar3{ 
    transform: rotate(45deg) translate(-8px, -px) ; 
} 

それがクリックされたとき、それはそれぞれのスタイルが変更される、それに新しいクラス名を追加するJavaScriptコードを実行します水平バー：最初と最後のバーが変換され、文字「x」に回転されます。中央のバーが消えて見えなくなります。

はJavaScript：

Template.header.event({ 
'click .btn-menu'(event) { 
    const x = event.target; 
    x.classList.toggle("change"); 
    }, 
}); 

誰も私が間違って何見つけることができますか？

Answer 1

event.targetとevent.currentTargetの違いを理解してください。

• は、イベントを送信した元のDOM要素、つまりユーザーがクリックした特定の「バー」を指定します。あなたのCSSを考えると、これはあなたが期待するものではありません。
• event.currentTargetは、イベントリスナーが添付されているDOM要素を取得します。これは、取得またはバブリングフェーズ中にイベントを受信します。あなたの場合、"btn-menu"の<div>があります。あなたのCSSを考えると、これはあなたが期待しているものです。

Template.header.event({ 
    'click .btn-menu' (event) { 
    const x = event.currentTarget; // Use currentTarget instead of target. 
    x.classList.toggle("change"); 
    }, 
}); 

デモ：https://jsfiddle.net/s1xyurq6/

注：あなたは、単にHamburgersのようなライブラリを使用するか、または少なくともそれからインスピレーションを取ることがあります。