【JS・CSS】カードをめくるアニメーションを実装する

概要

この記事では、カードをめくるアニメーションの実装方法についてまとめる。

オリジナルアプリの制作過程において、カードをめくる部分の実装につまづいた。
HTML / CSS / JSを使って実装するという前提で、学んだことを記録したい。

仕様

• ボタンを押すと、カードがめくられる
• カードがめくられたら、表示メッセージが変わる
• カードが裏向きのときは、メッセージを表示しない

デモはこちら🔽

See the Pen Card Flip Animation by Hatsumi Shimizu (@Hatsumi-Shimizu) on CodePen.

実装

カードとボタンのHTMLとCSSはすでに実装してある、という前提で話を進める。

DOM要素を取得

まず、JSで以下のDOM要素を取得する。

• カード
• メッセージ
• ボタン

const card = document.getElementById('card');
const flipBtn = document.getElementById('flip-btn');
const messageElement = document.getElementById('message');

DOMとは、HTMLなどの文書をJSから操作できるようにしたデータモデルのこと。

カードをめくるアニメーションを追加

次に、カードをめくるアニメーションを実装する。

JS：

// ボタンがクリックされたときの処理
flipBtn.addEventListener('click', () => {
  // カードを裏返す
  card.classList.add('flip');

  // 0.3秒後にメッセージを変更（裏返る途中）
  setTimeout(() => {
    messageElement.textContent = '新しいメッセージ';
  }, 300);

  // 0.6秒後にカードを表に戻す
  setTimeout(() => {
    card.classList.remove('flip');
  }, 600);
});

CSS：

/* カードが裏返った時のスタイル */
.card.flip {
  transform: rotateY(180deg);
  background-color: #D89A95;
  outline: 2px solid #fff;
  outline-offset: -5px;
}

/* 裏返った時はテキストを非表示 */
.card.flip > #message {
  visibility: hidden;
}

まとめ

カードをめくるアニメーションの実装方法をまとめた。

ポイントは以下の3つ🔽

• クラスのつけ外しで、カードの裏表を表現できる
• setTimeout()を使うと、「何秒後」に「どんな処理を行うか」を指定できる
• CSSを当てるときにはクラス、JSのDOM操作にはidを使うと良い