JavaScriptでCSSアニメーションを制御する方法（classList.toggle）

:hoverはマウスが乗るだけの反応でした。「クリックしたときだけ動かしたい」「もう一度押すと元に戻したい」——そんなときはJavaScriptの出番です。JSトラックで学んだaddEventListenerとclassListを、CSSアニメーションと組み合わせます。

いいねボタンを作る

ボタンを押すたびに、ハートが弾む・消えるを切り替えます。

しくみを分解する

CSS側は、.is-activeが付いたときだけ弾む動きをする、と決めているだけです。

<button class="like">🤍</button>

.like.is-active {
  animation: pop 0.35s ease;
}

JS側は、クリックのたびに.is-activeを付けたり外したりしています。

<button class="like">🤍</button>

const btn = document.querySelector('.like');
btn.addEventListener('click', () => {
  const active = btn.classList.toggle('is-active');
  btn.textContent = active ? '❤️' : '🤍';
});

classList.toggle('is-active')は、そのクラスが無ければ付ける、あれば外すという便利メソッド。しかも「付けた後どうなったか（true/false）」を返してくれるので、上の例ではそれを使って絵文字も一緒に切り替えています。

もう1つ：開閉するメニュー

同じ考え方で、メニューの開閉も作れます。

高さを0から200pxのように具体的な値の間でtransitionすると、なめらかに開閉できます（height: autoはtransitionできないので、あらかじめ十分なmax-heightを用意するのがコツです）。

このレッスンのまとめ

CSSで「クラスが付いたらこう動く」を用意し、JSはクラスの付け外しだけを担当する
classList.toggle('クラス名')で、クラスをON/OFFできる（結果はtrue/falseで返る）
見た目のルールはCSS、タイミングの制御はJS、と役割を分ける
開閉アニメーションはmax-heightをtransitionさせると作れる

これで「クラスの付け外しで動きを制御する」形が手に入りました。次回はこの形をそのまま使って、きっかけをクリックからスクロールに変えてみます。