JavaScript（jQuery）でアニメーションさせる時は、「最初」と「最後」の2つの状態を作ればいい

はじめに

JavaScriptでアニメーションを作ることに対し、苦手意識を持っている方に向けて書きました。

僕はJavaScriptでアニメーションを作る方法を覚えたての頃、苦手意識を持っていました。実現したいアニメーションについてググり、ヒットしたページからコードをコピペし、少しだけ調整し、雰囲気で動かしていました。

しかし、ある考え方を身につけてからは、少しだけ苦手意識を減らすことができました。

それは、「最初」と「最後」の2つの状態を作ればいいということです。

アニメーションには「最初」と「最後」の2つの状態が必要

アニメーションには「最初」と「最後」の2つの状態が必要です。

この考え方を持っているか持っていないかでアニメーションを作る時の思考に大きな違いが出ると思います。

例えば、ある要素をクリックしたら、クリックした要素を45度回転させるアニメーションを作りたいとします。そのためには、回転する前の状態と45度回転した後の状態の2つの状態をあらかじめ用意しておく必要があります。

JavaScriptでアニメーションを作るためには、CSSで「最初」と「最後」の状態をあらかじめ作成しておき、JavaScriptでクラスの追加と削除を行う

JavaScriptでアニメーションを作るには、CSSで「最初」と「最後」の状態をあらかじめ作成しておき、JavaScriptでクラスの追加と削除を行います。

アニメーションの作成手順をまとめると以下のようになります。

• CSSの手順
  1. アニメーションさせたい要素の最初の状態を作る
  2. アニメーションさせたい要素にtransitionを指定する
  3. アニメーションさせたい要素にクラスを追加する
  4. 追加したクラスで元々のCSSを上書きし、アニメーションさせたい要素の最後の状態を作る
• JavaScriptの手順
  1. アニメーションさせたい要素を取得する
  2. 何が起きたらアニメーションを開始したいのかを選ぶ
  3. アニメーションさせたい要素に対して、クラスを追加する

CSSの手順

アニメーションさせたい要素の最初の状態を作る

まずは、アニメーションさせたい要素の最初の状態を作ります。

ですが、アニメーションを加えようとするタイミングで、この手順は大抵完了しています。アニメーションを加えるタイミングはおそらくデザインデータを実装完了した後である場合が多いと思うからです。まず、デザインデータを実装し、その後に「ここはこういうアニメーションにしたい」という話に発展することが多いと思います。

この記事では、デザインデータを実装完了した状態が「アニメーションさせたい要素の最初の状態」であり、すでに完了している前提で進めます。

今回は、以下のようなHTMLとCSSを「アニメーションさせたい要素の最初の状態」とします。

<div class="kurukuru"></div>

.kurukuru {
  width: 100px;
  height: 100px;
  backgroud-color: red;
}

アニメーションさせたい要素にtransitionを指定しておく

transitionは最初と最後の状態を良い感じにアニメーションしてくれるCSSです。これを指定した要素は、アニメーション可能なスタイルに変化が起きた時、変化をアニメーションさせます。

  .kurukuru {
    width: 100px;
    height: 100px;
    backgroud-color: red;
+   transition: transform 0.4s;
  }

アニメーションさせたい要素にクラスを追加する

次に、アニメーションさせたい要素にクラスを追加します。アニメーション用にis-activeというクラスを追加します。is-activeというクラスには、次の手順でアニメーションした後のCSSを指定します。

- <div class="kurukuru"></div>
+ <div class="kurukuru is-active"></div>

追加したクラスで元々のCSSを上書きし、アニメーションさせたい要素の最後の状態を作る

追加したis-activeクラスに対して、元々のCSSに上書きする形でアニメーションし終わった後の状態を作ります。

CSSを書きつつ、ブラウザで確認しながら進めると良いと思います。

最終的には、このis-activeクラスはJavaScriptで追加することになります。

  .kurukuru {
    width: 100px;
    height: 100px;
    backgroud-color: red;
    transition: transform 0.4s;
  }
+
+ .kurukuru.is-active {
+   transform: rotate(45deg);
+ }

これで、「最初」と「最後」の2つの状態を作ることができました。

• is-activeがない時は回転する前の状態（最初）
• is-activeがある時は回転した後の状態（最後）

以上で、CSSですべきことは完了です。

ここまできたら、いったんChromeの検証モードで手動でクラスの追加と削除をしてみると良いと思います。

JavaScriptの手順

アニメーションさせたい要素を取得する

JavaScriptでHTMLの要素を操作したい時は、まず操作したい要素を取得します。大抵は、要素のクラス名を目印に取得することが多いと思います。

// jQueryならこんな感じ
+ $(".kurukuru");

// JavaScriptならこんな感じ
+ document.querySelector(".kurukuru");

本当は、JavaScriptで取得するためだけのクラスを用意するとより良いと思いますが、できるだけシンプルにしたいので今回は割愛します。

何が起きたらアニメーションを開始したいのかを選ぶ

JavaScriptにはイベントというものがあります。これは何をトリガー（きっかけ、合図）にするのか、というものです。イベントはすでにJavaScript側が用意しています。

• クリックしたら〜
• スクロールしたら〜
• 画面を読み込んだら〜

などがあります。自分が使いたいイベントを調べてそれを使います。

ここでは「クリックしたら〜」というイベントであるclickイベントというものを使うことにします。

// jQueryならこんな感じ
- $(".kurukuru");
+ $(".kurukuru").click(function(){
+   // あとで処理を書くところ
+ });

// JavaScriptならこんな感じ
- document.querySelector(".kurukuru");
+ document.querySelector(".kurukuru").addEventListener("click", function(){
+   // あとで処理を書くところ
+ });

イベントが発生したら、アニメーションさせたい要素に対して、クラスを追加する

最後に、アニメーションさせたい要素に対して、クラスを追加します。

ここで追加するクラスは、CSSの手順でアニメーションし終わった後の状態を指定したクラスです。なので、is-activeというクラスを追加する処理を記述します。

// jQueryならこんな感じ
  $(".kurukuru").click(function(){
+   $(".kurukuru").addClass("is-active");
  });

// JavaScriptならこんな感じ
  document.querySelector(".kurukuru").addEventListener("click", function(){
+   document.querySelector(".kurukuru").classList.add("is-active");
  });

※できるだけ多く人に理解してほしいため、冗長なコードだと思われる部分があるかもしれませんが見逃してください。

アニメーションができるか確認してみる

ここまでの手順を完了すれば、45度回転させるアニメーションが完成しているはずです。

以下の赤い四角形をクリックしてみてください。