Почему не работают onTransitionRun и onTransitionStart в реакте?

Question

[bitwheeze]

Почему не работают onTransitionRun и onTransitionStart в реакте? Я пытаюсь подцепиться к эвентам ontranstionstart, ontransitionrun и ontransitionend. И только ontransitionend работает. Для onTransitionRun и onTransitionStart в консоле браузера появляется это сообщение об ошибке.

index.js:27 Warning: Unknown event handler property `onTransitionStart`. It will be ignored.
    at div
    at div
    at App

Вот код

import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <div
        className="withtransition"
        onTransitionEnd={() => console.log("transitionEnd")}
        onTransitionRun={() => console.log("transitionRun")}
        onTransitionStart={() => console.log("transitionStart")}
      >
        TEST
      </div>
    </div>
  );
}

CSS

.withtransition {
  width: 200px;
  height: 200px;
  background-color: bisque;
  transition: all 200ms ease-in;
  transition-property: all;
}

.withtransition:hover {
  transform: scale(1.5);
}

У меня несколько div элементов, рандомные из них будут изменяться с анимацией. Хочется отследить когда все из них закончат анимацию, что бы потом js запустить следующий набор изменений. Я думал onTransitionRun увеличивать счетчик, а потом onTransitionEnd его уменьшать. Как только он станет 0, запускать следующий набор изменений.

Answer 1

[bitwheeze]

Вопрос решился самостоятельной подпиской на события.

import { useCallback, useEffect, useRef, useState } from "react";
import "./styles.css";

export default function App() {
  const [counter, setCounter] = useState(0);
  const divRef = useRef(null);

  const inc = useCallback(() => setCounter((c) => c + 1), []);
  const dec = useCallback(() => setCounter((c) => c - 1), []);

  useEffect(() => {
    divRef.current.addEventListener("transitionrun", inc);
    divRef.current.addEventListener("transitionend", dec);
    () => {
      divRef.current.removeEventListener("transitionend", dec);
      divRef.current.removeEventListener("transitionrun", inc);
    };
  }, []);

  return (
    <div className="App">
      <div ref={divRef} className="withtransition">
        {counter}
      </div>
    </div>
  );
}

Answer 2

[Антон Горецкий]

Не работает потому что таких событий там нет. А есть такие:

<div
  onAnimationStart={e => console.log('onAnimationStart')}
  onAnimationIteration={e => console.log('onAnimationIteration')}
  onAnimationEnd={e => console.log('onAnimationEnd')}
/>

вот ссылочка на документацию