JavaScriptでアニメーションの終了を検出する方法

requestAnimationFrameを使用する方法: requestAnimationFrameは、ブラウザにアニメーションを描画するための最適な方法です。アニメーションが終了すると、requestAnimationFrameのコールバック関数が呼び出されます。

function animate() {
  // アニメーションの処理を記述

  if (/* アニメーションが終了した条件 */) {
    // アニメーションが終了した場合の処理
  } else {
    requestAnimationFrame(animate);
  }
}
requestAnimationFrame(animate);

transitionendイベントを使用する方法: CSSのtransitionプロパティを使用してアニメーションを実装している場合、transitionendイベントを使用してアニメーションの終了を検出することができます。

const element = document.getElementById('animatedElement');
element.addEventListener('transitionend', function(e) {
  // アニメーションが終了した場合の処理
});

アニメーションライブラリを使用する方法: さまざまなJavaScriptのアニメーションライブラリ（例: GSAP、Anime.js）が存在し、これらのライブラリはアニメーションの終了を検出するためのメソッドやイベントを提供しています。各ライブラリのドキュメントを参照して、詳細な使用方法を確認してください。

以上の方法を使用することで、JavaScriptでアニメーションの終了を検出することができます。適切な方法は、アニメーションの実装方法やニーズに基づいて選択する必要があります。