Есть ли обратный вызов после завершения анимации CSS3?

Есть ли способ реализовать функцию обратного вызова в случае анимации css3? В случае анимации Javascript это возможно, но не найти способа сделать это в css3.

Один из способов, который я мог увидеть, - это выполнить обратный вызов после продолжительности анимации, но это не гарантирует, что он всегда будет вызываться сразу после завершения анимации. Это будет зависеть от очереди пользовательского интерфейса браузера. Мне нужен более надежный метод. Есть подсказка?

javascript css frontend

— изменить
источник

возможный дубликат обратного вызова при переходе через CSS

— givanse

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

— Madmadi

Ответы:

132

Да, есть. Обратный вызов - это событие, поэтому вы должны добавить прослушиватель событий, чтобы его поймать. Это пример с jQuery:

$("#sun").bind('oanimationend animationend webkitAnimationEnd', function() { 
   alert("fin") 
});

Или чистый js:

element.addEventListener("webkitAnimationEnd", callfunction,false);
element.addEventListener("animationend", callfunction,false);
element.addEventListener("oanimationend", callfunction,false);

Живая демонстрация: http://jsfiddle.net/W3y7h/

— метод действия
источник

Для IE10 это MSAnimationEnd (см. Msdn.microsoft.com/en-us/ie/hh272902#_CSSAnimations )

— Мартин Виттеманн

Это transitionendне так animationend.

@MichaelJones нет, это для переходов css3. вопрос был об анимации.

— joshvermaire

@MartinWittemann IE10 final теперь использует animationend msdn.microsoft.com/en-us/library/ie/… . @Husky, код действительно работает в Chrome и FF 14, см. Обновленную скрипку jsfiddle.net/W3y7h

— methodofaction

Дубликат stackoverflow.com/questions/9255279/…, у которого есть более полное решение

— vanthome

Простой способ выполнить обратный вызов, который также обрабатывает ваши переходы CSS3 / совместимость с браузером, - это плагин jQuery Transit . Пример:

//Pulsing, moving element
$("#element").click( function () {
    $('#element').transition({ opacity: 0, x: '75%' }, function () { $(this).transition({ opacity: 1, x: '0%' }).trigger("click"); });
});

Демонстрация JS Fiddle

— ROFLwTIME
источник

Бонус за то, что он разделяет спецификацию API с jQuery animate, но при этом использует аппаратную гладкость CSS-анимации. Мы просто заменили jQuery animate практически везде на это.

— logan