cssアニメーションとjsの同期

この記事はMojirageアドベントカレンダーの21日目の記事です。
matatsuna.hatenablog.com

cssのアニメーション

cssにはアニメーションがあります
詳しくはQiitaとかで
qiita.com

cssアニメーションとjsとの同期

ビジュアル的なカウントダウンするバーみたいなものをjsからリアルタイムに動かすのは少しコスト面から望ましくないです
そこで今回はcssアニメーションとjsの同期の方法を紹介します
挙動としては、「5秒間のアニメーションを流し終わったら処理をする/5秒間のうちにキャンセルされたら破棄する」です
流れは

• jsでcssアニメーションを発火する
• 発火したとき、終わるときのしてほしい挙動をsetTimeoutに仕掛ける
• 時間が来る前にキャンセルされたらclearTimeoutする

ソースコード

mojirageでは「マウスが上がって5秒(任意)経ったら平均化を実行する」としているのでその例を紹介します
HTML側

<div id="line" class="line"></div>

CSS側

.line {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 5px;
    background: #17cddd;
}
.fullwidth {
    animation-name: anime1;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-direction: normal;
}
@keyframes anime1 {
    0% {
      width: 100%;
      height: 5px;
      background-color: #17cddd;
    }
    100% {
      width: 0%;
      height: 5px;
      background-color: #17cddd;
    }
}

JavaScript側

mouseDown() {
    if (this.splitSetTimeout != null) {//もし仕掛けられていたら
        var line = document.getElementById("line");//lineのdomを取得
        line.className = "line";//元に戻す
        clearTimeout(this.splitSetTimeout);//仕掛けを破棄する
        this.splitSetTimeout = null;
   }
}
mouseUp() {
    const splitTime = this.userConfig.splitTime * 1000;//ミリ秒に変換する
    if (this.splitSetTimeout === null) {//もし仕掛けてなければ
        var line = document.getElementById("line");//lineのdomを取得
        line.className = "line fullwidth";//クラスを追加
        line.style.animationDuration = splitTime + "ms";//発火するまでのミリ秒を設定
        this.splitSetTimeout = setTimeout(() => {//setTimeoutを仕掛けて入れる
           //時間が経ったら動かすプログラム
        }, splitTime);//発火するまでのミリ秒を設定
    }
}

lineのdomを変数に入れてた方がいいですね

これで、cssのアニメーションと連動させてjsを動かすことが簡単にできると思います