【React】transitionの終了イベントをトリガーする

CSSのtransitionとsetTimeoutを使って下図のような要素群を自動的に左に移動させるというアニメーションをつくりたい

また、最終要素が出現したら、その次は１要素目がまた表示されるということをしたい

いろいろ試したが、アニメーションが終わったタイミングで１要素目を最初に戻す処理をしないとアニメーションが滑らかにつながらないことがわかった

そこで、動かしているスタイルアニメーションの終了をReactコンポーネント内で検知したい

onTransitionEndを使う

調べるとonTransitionEndを使えば良いことがわかった

developer.mozilla.org

Reactでは次のように実装する

  const onAnimationEnd = () => {
    // 処理を記載
  };

  return (<CarouselWrap onTransitionEnd={onAnimationEnd}>...</CarouselWrap>);