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

Question 1

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

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

Question 2

Да, есть. Обратный вызов - это событие, поэтому вы должны добавить прослушиватель событий, чтобы его поймать. Это пример с 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/

Question 3

Простой способ выполнить обратный вызов, который также обрабатывает ваши переходы 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

Answer 1

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

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

Answer 2

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

givanse

Answer 3

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

Madmadi

Answer 4

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/

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

3

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

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

6

Это transitionendне так animationend.

13

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

joshvermaire

4

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

methodofaction

1

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

vanthome

Answer 5

3