脱jQueryの道その２:あの機能は素のJavaScriptでどうやるんだろ編

アニメーションはJavaScriptで制御する方法もありますが、極力CSSでおこないます。
ちなみに脱jQueryの道 第一弾はこちら。

脱jQueryの道 初級編

タブメニュー

ディスプレイnoneとblockをフェードインで切り替えたいときはキーフレームアニメーション使うと簡単です。

JavaScript

(() => {
	document.querySelectorAll('.tab-block').forEach((tabContents) => {
		let activeIndex = 0;

		const tabNav = tabContents.querySelectorAll('.tab-nav li');
		const tabBody = tabContents.querySelectorAll('.tab-body li');

		tabNav.forEach((nav, index) => {
			nav.addEventListener('click', (e) => {  
				if (activeIndex === index) return;
		
				tabBody[activeIndex].classList.remove('active');
				tabNav[activeIndex].classList.remove('active');
		
				e.target.classList.add('active');
				tabBody[index].classList.add('active');
		
				activeIndex = index;
			});
		});
	});
})();

アコーディオン

height:autoはアニメーションできないので、一旦JSでheightを取得してます。
window.addEventListener('load')後でないと正確なheightを取得できません。

JavaScript

window.addEventListener('load', () => {
    document.querySelectorAll('.accordion').forEach((accordion) => {
        let activeIndex = null;
        
        const accordionToggle = accordion.querySelectorAll('.submenu-toggle');
        const accordionList = accordion.querySelectorAll('.accordion > li');

        
        // autoはアニメーション設定できない為height取得
        accordion.querySelectorAll('.submenu').forEach((submenu) => {
            submenu.style.height = submenu.clientHeight + 'px';
            submenu.parentNode.classList.add('close');
        });
        
        accordionToggle.forEach((toggleBtn, index) => {
            toggleBtn.addEventListener('click', (e) => {
                if (activeIndex !== null && activeIndex !== index) {
                    accordionList[activeIndex].classList.add('close');
                }
                e.target.parentNode.classList.toggle('close');
        
                activeIndex = index;
            });
        });
    });
});

ドロップダウンメニュー

マウスオーバー/アウトのクラスの切り替えだけでいけます。

JavaScript

(() => {
	document.querySelectorAll('.nav-toggle').forEach((nav) => {
		nav.addEventListener('mouseenter', (e) => {
			e.target.classList.add('open');
		});
		nav.addEventListener('mouseleave', (e) => {
			e.target.classList.remove('open');
		});
	});
})();

スクロールすると変化する

スクロールするとナビゲーションがちょっと狭くなる例です。
これもwindow.addEventListener('scroll')でクラスを切り替えるだけですね。

JavaScript

window.addEventListener('scroll', () => {
	const globalNav = document.querySelector('#global-nav');
	let scrollTop = document.scrollingElement.scrollTop;

	if (scrollTop > 10) {
		globalNav.classList.add('scroll');
	} else {
		globalNav.classList.remove('scroll');
	}
});