Как создать анимацию вращения на reactJS?

Question

[Username]

Добрый день, как реализовать анимацию вращения на ReactJs?
Суть:
Пользователь нажимает кнопку в этот момент div элемент начинает крутиться, посылается ajax запрос на сервер, после того как пришёл ответ от сервера и прошло 3 секунды с момента вращения элемента, нужно довернуть элемент нужной стороной в зависимости от ответа сервера.
Как реализовано сейчас:
После срабатывания события onClick происходит запрос на сервер и установка стиля для элемента

animation: `wheel-classic-animation .6s linear infinite`,

и запускается setTimeout(()=>{}, 3000).
После того как прошло 3 секунды и получен ответ от сервера, я доварачиваю элемент до нужно мне угла, к примеру 240deg transform: `rotate(240deg)`,
Но этот подход не идеален, т.к. получается дёрганная анимация между сменой анимацией с wheel-classic-animation на transform: `rotate(240deg)`,
Как бы вы реализовали эту задачу?

Answer 1

[Negwereth]

requestAnimationFrame, так как вам нужно всегда знать, на какой угол в какой момент времени повёрнут элемент.
В таком случае вы всегда сможете рассчитать необходимый путь для «парковки» элемента.

Answer 2

[Kovalsky]

Мне кажется гораздо проще пользоваться соответствующими ивентами для анимации. В этом случае вы ничего не считаете, никакие матрицы не преобразовываете, используете вашу анимацию как и обычно, только дописываете к ней небольшой кусочек кода, который решает когда нужно её остановить.

По первому клику вешаете класс с анимацией, а по повторному клику устанавливаете количество итераций анимации равное номеру текущей. Тут есть несколько вариантов: можно сделать счетчик итераций, а можно опираться на AnimationEvent.elapsedTime. Когда анимация заканчивается (animationend) выполняете нужные функции.

Применительно к вашему коду это будет выглядеть как-то так: после срабатывания события onClick происходит запрос на сервер и установка класса для элемента, после того как получен ответ от сервера - просите элемент закончить анимацию, в конце анимации обрабатываете ответ.

Если вы используете реакт, то можно анимируемый элемент оформить в виде компонента, в который вы при просьбе об остановке будете передавать колбэк.

Answer 3

[profesor08]

CSS анимациями и подстановкой свойств/классов это не достижимо. Потому что нельзя получить точное положение элемента средствами JS, а потом из того положения продолжить анимацию. В некоторых случаях можно получить данные, но получится дерганая анимация, потому что с момента получения данных, элемент продолжит свою анимацию, тем самым данные станут устаревшими.

Comments

[Kovalsky]

Да не, всё достаточно просто и никаких задержек не будет.

[profesor08]

Никита Полевой: я про это и имел ввиду, и тут они будут.

[Kovalsky]

profesor08: нет.