CartmanGui
@CartmanGui

Как обработать события окончания css3 анимации?

В общим из js скрипта для элемента добавляю класс с css3 анимацией в том же скрипте мне нужно обработать событие окончания анимация, для этого на элемент цепляю обработчик
el.on("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function (e) {
            console.log('animationend!!!!!');
});

Но вот стоит свернуть окно браузера и обработка события не срабатывает, такое ощущение что браузер пытается оптимизировать свою работу и для свернутых окон перестает крутить анимацию и соответственно событие не срабатывает
  • Вопрос задан
  • 1128 просмотров
Пригласить эксперта
Ответы на вопрос 2
serjikz
@serjikz
web-developer
Вах вах вах. Какой ужс. А нельзя повесить класс и тут же задать timeout строкой ниже? Или у вас этот класс в таком .div .anim имеет 3 секунды длительность анимации, а просто в .anim имеет 1 секунду?

И вообще вопрос, у вас там че анимация в несколько минут чтоль, что человек даже браузер свернуть захочет, пока она идет?
Ответ написан
IonDen
@IonDen
JavaScript developer. IonDen.com
Если анимация зациклена то проще на CSS указать что она бесконечна. Если нужна какая-то пауза между итерациями - используйте @keyframes.

В остальном transitionend - идеальный вариант.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы