Чи є зворотний виклик після завершення анімації CSS3?

Чи є спосіб реалізувати функцію зворотного виклику у випадку анімації css3? У разі анімації Javascript це можливо, але не знайдено жодного способу зробити це в css3.

Один із способів, який я міг бачити, - це виконати зворотний виклик після тривалості анімації, але це не гарантує, що він завжди буде викликаний відразу після закінчення анімації. Це буде залежати від черги інтерфейсу браузера. Я хочу більш надійний метод. Будь-яка підказка?

javascript css frontend

— змінювати
джерело

можливий дублікат

— зворотного

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

— Мадмаді,

Відповіді:

130

Так, є. Зворотний дзвінок - це подія, тому ви повинні додати прослуховувач події, щоб його вловити. Це приклад з 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 майже у всіх місцях на це.

— Логан