CSSのtransition
とsetTimeoutを使って下図のような要素群を自動的に左に移動させるというアニメーションをつくりたい
また、最終要素が出現したら、その次は1要素目がまた表示されるということをしたい
いろいろ試したが、アニメーションが終わったタイミングで1要素目を最初に戻す処理をしないとアニメーションが滑らかにつながらないことがわかった
そこで、動かしているスタイルアニメーションの終了をReactコンポーネント内で検知したい
onTransitionEndを使う
調べるとonTransitionEndを使えば良いことがわかった
Reactでは次のように実装する
const onAnimationEnd = () => { // 処理を記載 }; return (<CarouselWrap onTransitionEnd={onAnimationEnd}>...</CarouselWrap>);