トップに戻る
jQueryでCSSアニメーション終了時の処理を作る方法
 > 
jQuery > 
JavaScript > 
プログラミング > 
HOME > 
2022/06/18
2023/08/06

jQueryでCSSアニメーション終了時の処理を作る方法

CSSアニメーションは手軽に高度なアニメーションを実装できますが、JavaScriptなどと違ってコールバック関数を設定することができません。

1つ目のアニメーション終了後に、2つ目のアニメーションを動かしたい・・・という場合に困ってしまいます。

その問題を解決するために役立つのが、jQueryの「animationend」イベントです。今回は、CSSのアニメーション終了時の処理をjQueryで作る方法を解説していきます。

【イベント】animationend

CSSのアニメーション終了を検知する際には、”animationend”というイベントがキーになります。

animationendイベントは、CSSアニメーションに限らず、対象となる要素で何かしらのアニメーションが終了した場合に発生するイベントです。

CSSアニメーション場合、animationプロパティを用いて実装されたアニメーション（keyframesアニメーション等）が完全に終了した場合に実行されます。

animationendイベントを使用するメリット

animationendイベントをわざわざ使わなくても、関数setTimeout( )を使用すれば疑似的にアニメーション後に処理を実行できます。

ただ、CSS側でアニメーションの所要時間を変更する度に、setTimeoutの数値も変更する必要があるため、開発の所要時間が大幅に伸びるかもしれません。

animationendはアニメーションの所要時間に関わらず、とりあえずCSSアニメーションが終わった際に発火するイベントですから、CSS側で実行時間を自由に変更できるのがメリットです。

jQueryでanimationendを使う

jQueryでanimationendを使うためには、イベントリスナーを設置すればOKです。

基本的には、以下のようなコードで実装できます。clickやmousemoveなどのイベントと実装方法はほぼ同じです。

$(document).on("animationend", 対象となる要素, function(){
    // 実行したい処理
});

ただ、多少異なる点があるので、それについては後述します。

では、実際にjQueryでanimationendイベントを利用し、アニメーション終了後の処理を作っていきましょう。

サンプルプログラム

<head>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <div id="sample-container">
        <!-- 動く箱 -->
        <div class="box"></div>
    </div>

    <!-- アニメーション終了後にテキストを表示する -->
    <div class="text"></div>

    <!-- javascript -->
    <!-- あとで実装するもの -->
    <script src="./sample.js"></script>
</body>
/* style.css */

@keyframes moveBox{
    from{
        left: 0%;
    }
    to{
        left: calc(100% - 100px);
    }
}

#sample-container{
    width: 80vw;
    height: 200px;
    position: relative;
    background: pink;
}

.box{
    width: 100px;
    height: 100px;
    background: red;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    animation: moveBox 3000ms linear forwards;
}

.text{
    font-size: 20px;
}

上記コードを実装すると、以下のようなアニメーションが流れます。

イベントを設置

では、次にjQueryのイベント処理を書いていきます。

実装する処理は皆さんの自由ですが、ここでは簡単にアニメーションが終了した後、文字列を画面上に表示させるプログラムにしましょう。

前述したひな形にならって、以下のようなコードをJavaScriptファイルに入力してください。

/* sample.js */

$(()=>{
    // イベント設置
    $(document).on("animationend", ".box", function(){
        // class「text」の要素にテキストを表示
        $(".text").text("アニメーション終了");
    });
});

もちろん、HTMLのscriptタグに直接書き込んでも良いです。

ここまでのコードをしっかり実装できていれば、画像のようにアニメーションが終了した後に「アニメーション終了」という文字が表示されるはず。

その他の実装方法

animationendはjQuery専用のイベントリスナーではないので、もちろん、通常のJavaScriptの記法でも問題なく実装可能です。

// イベント設置
let target = document.getElementsByClassName("box");
target[0].addEventListener("animationend", function(){
    $(".text").text("javascriptで実装");
});

ただ、目に見えてコード量が増えるので、管理人は基本的にjQueryで実装しています。

clickイベントと同様に動くわけではない

jQueryを使っている方であれば、以下のようなコードでイベントリスナーを設置することも多いですよね。

$(要素名).click(function(){
    // 実行したい処理
});

簡潔にコードが書けて便利なのですが、animationendで同じようにイベントリスナーを設置しようとしても、エラーを吐いてしまいます。

$(".box").animationend(function(){
    // class「text」の要素にテキストを表示
    $(".text").text("animationendのイベントリスナーです。");
});

【実行結果】

必ず、onメソッドを用いてイベントリスナーを設置しましょう。

まとめ

CSSとJavaScriptは切っても切れない関係にあり、CSSアニメーションとJavaScriptの処理を連携させたいとなる場面が多いです。

より完全性の高いプログラムを構築するためにも、jQueryでanimationendイベントを上手に使い、CSSアニメーションをさらに便利に活用していきましょう。

SHARE