Czy jest callback po zakończeniu animacji CSS3?

Czy Jest jakiś sposób na zaimplementowanie funkcji callback w przypadku animacji css3? W przypadku animacji Javascript jest to możliwe, ale nie znajduje sposobu, aby to zrobić w css3.

Jednym ze sposobów, które widziałem, jest wywołanie zwrotne po czasie trwania animacji, ale to nie zapewnia, że zawsze będzie wywoływane zaraz po zakończeniu animacji. Zależy to od kolejki interfejsu przeglądarki. Chcę bardziej solidnej metody. Jakieś wskazówki?

Author: Joshua, 2011-05-31
Source

2 answers

Tak, jest. Wywołanie zwrotne jest zdarzeniem, więc musisz dodać słuchacza zdarzeń, aby je złapać. To jest przykład z jQuery: 

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

Lub czysty js: 

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

Live demo: http://jsfiddle.net/W3y7h/

 112
Author: Duopixel,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-09-03 23:34:59

Łatwym sposobem na wywołanie zwrotne, które obsługuje również twoje przejścia CSS3/zgodność z przeglądarką, jest wtyczka jQuery Transit . Przykład: 

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

Js Fiddle Demo

 3
Author: ROFLwTIME,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-03-21 12:40:14