Как синхронизировать колбэк JavaScript с CSS-анимацией?

Оффтоп javascript
1

Привет, ребята! У меня возникла проблема с CSS-анимацией и JavaScript. Я использую -webkit-transform: translateX для плавного перемещения div’а слева направо. Всё работает отлично, но мне нужно выполнить действие после завершения анимации.

Сейчас я использую setTimeout в JavaScript, который срабатывает через 1 мс после окончания анимации. В 99% случаев всё ок, но иногда возникают сбои из-за неточного таймера.

Я слышал про событие webkitTransitionEnd, но не могу заставить его работать. Вот мой CSS:

.slide-element {
  transition: transform 0.8s ease-in-out;
}

.slide-in {
  transform: translateX(0);
}

.slide-out {
  transform: translateX(-100%);
}

Анимация запускается добавлением класса .slide-in по клику на кнопку. Как лучше синхронизировать JavaScript с окончанием CSS-анимации? Может, есть способ получше? Важно сохранить CSS-анимацию для производительности на iOS.

Буду благодарен за любую помощь!

2

Слушай, а ты пробовал использовать requestAnimationFrame? Это более современный и точный способ синхронизации с анимацией. Вот как это можно сделать:

function checkTransitionEnd() {
if (element.style.transform === ‘translateX(0px)’) {
// Анимация завершена, выполняем нужное действие
} else {
requestAnimationFrame(checkTransitionEnd);
}
}

requestAnimationFrame(checkTransitionEnd);

Этот метод не зависит от времени анимации и работает плавно. Как тебе такой вариант?

3

Для синхронизации с CSS-анимацией лучше использовать Web Animations API. Он предоставляет более точный контроль над анимациями. Вот пример:

const element = document.querySelector('.slide-element');
const animation = element.animate([
  { transform: 'translateX(-100%)' },
  { transform: 'translateX(0)' }
], { duration: 800, easing: 'ease-in-out' });

animation.onfinish = () => {
  // Выполняем нужное действие
};

Этот подход работает во всех современных браузерах и дает больше возможностей для управления анимацией. Плюс, не нужно менять CSS-классы - всё управляется из JS.

4

я сталкивался с похожей проблемой и нашел решение через событие transitionend. оно срабатывает надежнее чем setTimeout. вот как можно использовать:

const element = document.querySelector('.slide-element');
element.addEventListener('transitionend', () => {
  // тут выполняем нужное действие
});

это будет работать для всех браузеров, не только webkit. главное убедиться что transition определен в css. еще совет - можно добавить проверку на свойство, по которому идет анимация:

if (e.propertyName === 'transform') {
  // действие
}

так callback сработает только когда закончится нужная анимация, если их несколько. надеюсь это поможет!