こんにちは、コンスキです。
今回は、ハンバーガーメニューのアイコンをタップするとばつ印になるアニメーション作りたいと思います。
忘れていたアニメーション
ヘッダーにある2本の横線をタップするとハンバーガーメニューを開くことができることは、以前話したと思います。
さらに、開いた状態で同じく2本の横線をタップすると、今度はハンバーガーメニューを閉じることができます。
私が参考しているサイトでよくあるのは、ハンバーガーメニューが閉じられているときは2本の横線になり、ハンバーガーメニューが開かれているときはばつ印になるというようなアニメーションです。
ハンバーガーメニューの開閉のアニメーションをつけたときは気がつかなかったのですが、うっかりこのばつ印に変更するアニメーションをつけ忘れていました。
今回はそのアニメーションをどうやって設定するのかについて書いていきます。
設定方法
まずは、ハンバーガーメニューの2本の横線を単に「アイコン」と呼ぶことにします。
このアイコンを構成している横線一つ一つにCSSで「transitoin」プロパティを設定します。
これは横線が滑らかに移動するようにするためです
.hamburger_line {
transition: all 0.2s ease;
}次にJavaScriptで線の傾きや上下の位置を設定します。
// ハンバーガーメニュー
// 要素の取得
let hamburgerButton = document.getElementById('hamburger_button');
let hamburgerMenu = document.getElementById('hamburger_menu');
let hamburgerLine = document.getElementsByClassName('hamburger_line');
//ハンバーガメニュー状態
let isOpen = false;
//ハンバーガーメニューを画面の表示と非表示
function showAndHide() {
if(!isOpen) {
hamburgerMenu.style.top = '64px';
} else {
hamburgerMenu.style.top = '-1000px';
}
}
//ハンバーガーメニューのアイコンのアニメーション
function changeIcon() {
if(!isOpen) {
hamburgerLine[0].style.marginTop = '8px';
hamburgerLine[1].style.marginBottom = '8px';
setTimeout(function() {
hamburgerLine[0].style.transform = 'rotate(45deg)';
hamburgerLine[1].style.transform = 'rotate(-45deg)';
}, 200);
} else {
hamburgerLine[0].style.transform = 'rotate(0deg)';
hamburgerLine[1].style.transform = 'rotate(0deg)';
setTimeout(function() {
hamburgerLine[0].style.marginTop = '0';
hamburgerLine[1].style.marginBottom = '0';
}, 200);
}
}
hamburgerButton.addEventListener('click', function() {
showAndHide();
changeIcon();
isOpen = !isOpen;
});これでアイコンをタップすることでハンバーガーメニューのアイコンのアニメーションが表示されるようになりました。
ハンバーガーメニューが閉じている状態であればばつ印に、ハンバーガーメニューが既に開いている状態であればアイコンはもとの２本の横線に戻ります。
コメント