【JacvaScript】setTimeout();を使い、画面を再読み込み（リロード）させることなく、アニメーションをリセットする方法

クイズアプリのタイマーで、NEXTボタンを押したときに、アニメーションをリセットし、開始させる方法を自分なりに考えてみました。

画面を再読み込みさせれば、アニメーションはリセットされるのですが、それだとクイズ自体もリセットされ、一問目に戻ってしまうので、再読み込みさせることなく、アニメーションだけリセットさせる必要があります。

Javascriptでクラスを付与する方法

最初に書いたのは以下の方法

  document.querySelector(".btn").addEventListener("click", function(){
      const width = document.querySelector(".test");
      width.classList.remove("width")
      width.classList.add("width")
  })

これだとクラスを取り除いてから追加しても、一瞬なのでブラウザは新しくクラスが追加されたと認識してくれないようです。

クリック

一回目のクリックではアニメーションが開始されますが、二回目以降は動いてくれません。

setTimeoutを使う方法

いろいろ試行錯誤した結果、setTimeout();を使うことにより、リセットさせることができました。

  const width = document.querySelector(".test2");
  function startAni(){
      width.classList.remove("width")
      function restartAni(){
          width.classList.add("width")
          }
      setTimeout(restartAni,100);
  }
  document.querySelector(".btn2").addEventListener("click", function(){
      startAni();
  })

クリック

クイズアプリで使ったタイマー

最初は時間とともに青い線が横に伸びていくものでしたが、 PCはいいのですが、レスポンシブに対応させるのが難しく、 ケータイだと青い線が付きだしてしまいました。

このタイプならどの画面幅でも対応できるのでおススメです。

リセット