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

Question

[CartmanGui]

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

el.on("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function (e) {
            console.log('animationend!!!!!');
});

Но вот стоит свернуть окно браузера и обработка события не срабатывает, такое ощущение что браузер пытается оптимизировать свою работу и для свернутых окон перестает крутить анимацию и соответственно событие не срабатывает

Answer 1

[Сергей ZSA]

Вах вах вах. Какой ужс. А нельзя повесить класс и тут же задать timeout строкой ниже? Или у вас этот класс в таком .div .anim имеет 3 секунды длительность анимации, а просто в .anim имеет 1 секунду?

И вообще вопрос, у вас там че анимация в несколько минут чтоль, что человек даже браузер свернуть захочет, пока она идет?

Comments

[CartmanGui]

timeout не подходит, анимация зациклена

[littleguga]

CartmanGui: до какого момента она зациклена?

Answer 2

[Денис Инешин]

Если анимация зациклена то проще на CSS указать что она бесконечна. Если нужна какая-то пауза между итерациями - используйте @keyframes.

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