Czy istnieje wywołanie zwrotne po zakończeniu animacji CSS3?

Czy istnieje sposób na zaimplementowanie funkcji zwrotnej w przypadku animacji css3? W przypadku animacji Javascript jest to możliwe, ale nie można tego zrobić w css3.

Jednym ze sposobów, które mogłem zobaczyć, jest wykonanie wywołania zwrotnego po czasie trwania animacji, ale to nie gwarantuje, że zawsze będzie wywoływane zaraz po zakończeniu animacji. Będzie to zależeć od kolejki interfejsu przeglądarki. Chcę solidniejszej metody. Jakaś wskazówka?

javascript css frontend

— zmieniać
źródło

możliwy duplikat Callback przy przejściu do CSS

— givanse

jeśli chcesz wykonać prostą akcję CSS, na przykład ukryć element po jego przejściu, być może nie potrzebujesz wywołania zwrotnego, a zamiast tego możesz rozwiązać problem z klatką kluczową animacji.

— Madmadi

Odpowiedzi:

132

Tak jest. Wywołanie zwrotne jest zdarzeniem, więc aby je złapać, musisz dodać detektor zdarzenia. Oto 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);

Demo na żywo: http://jsfiddle.net/W3y7h/

— metoda działania
źródło

W przypadku IE10 jest to „MSAnimationEnd” (patrz msdn.microsoft.com/en-us/ie/hh272902#_CSSAnimations )

— Martin Wittemann

To transitionendnie jest animationend.

@MichaelJones nie, to dotyczy przejść CSS3. pytanie dotyczyło animacji.

— joshvermaire

@MartinWittemann wersja ostateczna IE10 używa teraz animationend msdn.microsoft.com/en-us/library/ie/… . @Husky kod działa w Chrome i FF 14, zobacz zaktualizowane fiddle jsfiddle.net/W3y7h

— methodofaction

Duplikat stackoverflow.com/questions/9255279/…, który ma bardziej kompletne rozwiązanie

— vanthome

Łatwym sposobem na wywołanie zwrotne, które obsługuje również przejścia CSS3 / zgodność z przeglądarkami, byłaby 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

— ROFLwTIME
źródło

Dodatkowy punkt za współdzielenie specyfikacji API z jQuery animate, ale wciąż korzystające z płynności animacji CSS renderowanej sprzętowo. Właśnie zastąpiliśmy jQuery animate we wszystkich miejscach.

— logan