【Animate.css】クリックでアニメーションを実行する

こんにちは、Ryohei（@ityryohei）です！

クリックイベントでAnimate.cssのアニメーションを実行する方法のご紹介です。

前回の【Animate.css】スクロールに合わせてアニメーション表示するではスクロールによってアニメーションする処理をご紹介しましたが、今回はクリックイベントによってアニメーションを実行してみたいと思います。

Animate.cssは下記のページからダウンロードできますので、お持ちでない方はダウンロードしましょう。

では、解説していきます。

クリックでアニメーションを実行する

Animate.cssのアニメーションを利用するには、上記でダウンロードしたanimate.cssのスタイルシートと、animatedとアニメーション名のclassを追加した要素が必要になります。一例として、bounceのアニメーションを利用してみます。

(下記ではCDNでanimate.cssを読み込んでいます。)

CSS

https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css

HTML

<div class="animated bounce"></div>

同じコードを記述して、ページを読み込んでみてください。読み込み完了後に一度だけアニメーション表示されたかと思います。もし、同じアニメーションをずっと繰り返して表示したい場合は、infiniteというclassを追加しましょう。

<div class="animated bounce infinite"></div>

infiniteを追加して再度ページを読み込むと、指定した要素がずっとアニメーションを繰り返しているかと思います。

Animate.cssを利用することで、簡単に素敵なアニメーションを使うことができます。スタイルシートを読み込んでclassを追加するだけなので、本当に簡単です。

ただ、Animate.cssはあくまでスタイルシートなので、これ単体で動的な処理を実行することができません。なので、何らかの処理の後にAnimate.cssでアニメーションを表示したい場合は、スクリプトで処理を記述します。

準備として、スクロールのときにご紹介した内容と同じく、HTMLに任意のdata属性を追加します。data属性の値には、実行したいアニメーション名を指定します。実装方法は他にもあるのですが、どのアニメーションが指定されているのか一目で判断できるため、data属性で指定する書き方が気に入っています。

<div class="animated" data-animate="bounce">bounce</div>

もし、fadeInを指定したい場合は、bounceをfadeInに書き換えます。

最後にスクリプトを記述していきます。ここでは、jQueryを使って処理を実装します。各処理については記載のコメントをご確認いただければと思います。

JS

$('.btn').on('click', function(){

  //data属性からアニメーション名を取得
  var animationName = $('.elem').data('animate');

  //アニメーション要素にdata属性から取得したclassを追加　1秒後に削除
  $('.elem').addClass(animationName).delay(1000).queue(function(next){
    $('.elem').removeClass(animationName);
    next();
  });
});

上記をすべて記述すると下記のような処理になります。

See the Pen Click Animate.css｜jQuery by ryoy (@intotheprogram) on CodePen.

6行目のdelayの引数に指定してある数字（1000）はanimate.cssで設定されているアニメーション時間に合わせています。時間を変更されている場合は、環境に合わせてdelayの秒数を変更しましょう。

まとめ

本記事で紹介した内容をまとめてご紹介いたします。下記を使用することでAnimate.cssを使ったクリックによるアニメーションを簡単に実装することができます。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
  </head>
  <body>

    <section>
      <div class="elem animated" data-animate="bounce">
        Bounce
      </div>
      <a href="#" class="btn">Click Me!</a>
    </section>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $('.btn').on('click', function(){

      var animationName = $('.elem').data('animate');

      $('.elem').addClass(animationName).delay(1000).queue(function(next){
        $('.elem').removeClass(animationName);
        next();
      });
    });
    </script>
  </body>
</html>

Animate.cssは色々なアニメーションを簡単に追加することができる便利なスタイルシートです。少しスクリプトを追加するだけで表現の幅が広がります。これを機に一つ表現方法を習得していただければ幸いです。

以上、Animate.cssのアニメーションをクリックで実行するする方法のご紹介でした！