「addEventListener」でクリックしたら指定した要素をアニメーションさせる方法

addEventListenerメソッドを使って「◯◯をクリックしたら指定した要素をアニメーションさせる方法」をご紹介させていただきます。

まずは下記のDEMOレビュー画面の「赤い丸」をクリックしてみてください。
どんな動きになるのかわかると思います。

ホームページでは「A要素をクリックしたらB要素を動かす」などの処理を要求されることが非常に多いです。

この技術を習得することで、そういった処理を行うことができるようになりますので、JavaScript初心者の方はぜひチャレンジして見てください！

クリックしたら指定した要素を動かす「サンプルコード」

<div class="box"></div>
<style>
    .box{
        margin: 80px auto;
        width: 300px;
        height: 300px;
        background: red;
        border-radius: 50%;
    }
    .move{
        animation: box_move 2s forwards;
    }
    @keyframes box_move {
        0%{
            transform: translate(0 , 0);
        }
        50%{
            transform: translate(0 , 80px);
        }
        100%{
            transform: translate(80px , 80px);
        }
    }
</style>
<script>
    'use strict';
    {
        const $a = document.querySelectorAll('.box')[0];
        $a.addEventListener('click' , () => {
            $a.classList.add('move');
        });
    }
</script>

今回使用するJavaScriptのセレクター一覧

querySelectorAll	id、class、タグなどの情報をすべて取得し配列にしてくれる
addEventListener(‘click’ , () => {});	クリックしたら
classList.add(”)	classを付与する

作り方を順番に解説

「クリックしたら指定した要素を動かす」コードの書き方、解説を行っていきます！

処理の流れ、全体像

.boxをクリックしたら.boxと同じタグに.moveが付与されアニメーションが始まる！という仕組みになります。

※今回はJavaScriptの書き方のみを解説させていただきます。

STEP1:要素の情報を取得

今回は「クリックしたら」→「動かす」という流れになりますので、取得するべき情報は下記の２つです。

クリックに使う要素
動かしたい要素

ただ、今回は「クリックに使う要素」と「動かしたい要素」は同じになりますので、取得する情報は１つだけになります。

結論、取得するためのコードはこちらになります↓

const $a = document.querySelectorAll('.box')[0];

今回はquerySelectorAllを使って、取得したいクラス名を指定して情報を取得したため、上記の書き方になります。

querySelectorAllで情報を取得する場合は、

下記のようにquerySelectorAllのカッコの中にclass名を指定します。指定の仕方は様々ですが、classの場合はドットをつけなければいけませんので気をつけてください。

document.querySelectorAll('ここにクラス名をドットをつけて入力')
↓
document.querySelectorAll('.box')

さらに指定したclassの何番目の要素を取得するかを指定しなければいけません。

そのため１番目の場合は[0]、２番目の場合は[1]を最後に指定します。

document.querySelectorAll('.box')[0];  ←１番目の場合
document.querySelectorAll('.box')[1];  ←2番目の場合
document.querySelectorAll('.box')[2];  ←3番目の場合

最後に取得した情報をconstを使って変数に置き換えておきます。

const $a = document.querySelectorAll('.box')[0];

STEP2:クリックしたらクラスを付与する

次にクリック処理を行なっていきます。

クリックしたら.moveというクラスを.boxと同じタグに付与されるようにしたいと思います。

まずは結論ですが、クリックしたら.moveを付与するには下記のコードになります。

$a.addEventListener('click' , () => {
    $a.classList.add('move');
});

「クリックしたら」というイベントを作りたい時は

addEventListener('click' , () => {});こちらの関数を使用していきます。

クリック元の情報を手前につける↓

クリック要素をここに指定.addEventListener('click' , () => {});
↓
$a.addEventListener('click' , () => {});

クリックしたらの処理を{}の中に記載する

$a.addEventListener('click' , () => {
    //ここにクリックしたら何をしたいかを入力
});
↓
$a.addEventListener('click' , () => {
    $a.classList.add('move');//$aに.moveのクラスを付与する
});

クラスの付与はclassList.add('')で行うことができます。

以上で完成となります！

まとめ

JavaScriptでの「クリックしたら◯◯させる」という処理は、WEB制作では非常によく使われます。

もしこのページの内容を着手してみて、いまいち理解できないと思った場合は、ぜひこちらのカリキュラムから勉強を順番にしてみてください。

意味が理解できればすごく簡単な内容です！
勉強をし始めたらきっと3日以内にできるようになると思います！

そうしたらWEB開発がより一層楽しくなると思いますのでぜひ頑張ってください。

WePuri

ワードプレス教室