Search code examples
reactjsevents

transitionstart event in React component

I am trying to add a callback function in my React component to capture the transitionstart event. Apparently, only transitionend is supported. Do you know any workaround?

<div
    className="super-component--animated"
    { /** Not supported **/ }
    onTransitionStart={() => {
        this.changeAnimationStatus(true);
    }}
    onTransitionEnd={() => {
        this.changeAnimationStatus(false);
    }}
>
     Hello Friends!
</div>

Transition events: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitionstart_event

Solution

  • All unsupported event in React should be handled vanilla style.

    const MyComp = () => {
...
 const handler = () => {
 ref.current.addEventListener('your_event', () => {...})
 }
 return <div ref={ref}/>
}

    see the following sandbox: transition start listener example