Czy są jakieś zdarzenia uruchamiane przez element w celu sprawdzenia, czy przejście css3 rozpoczęło się lub zakończyło?
źródło
Czy są jakieś zdarzenia uruchamiane przez element w celu sprawdzenia, czy przejście css3 rozpoczęło się lub zakończyło?
Zakończenie przejścia CSS generuje odpowiednie zdarzenie DOM. Zdarzenie jest uruchamiane dla każdej właściwości, która podlega przejściu. Umożliwia to twórcy treści wykonywanie działań synchronizujących się z zakończeniem przejścia.
Aby ustalić, kiedy przejście zostanie zakończone, ustaw funkcję nasłuchiwania zdarzeń JavaScript dla zdarzenia DOM wysyłanego na końcu przejścia. Zdarzenie jest instancją WebKitTransitionEvent, a jego typem jest
webkitTransitionEnd
.
box.addEventListener( 'webkitTransitionEnd',
function( event ) { alert( "Finished transition!" ); }, false );
Istnieje jedno zdarzenie, które jest uruchamiane po zakończeniu przejścia. W Firefoksie zdarzenie jest
transitionend
w OperzeoTransitionEnd
, a w WebKit jestwebkitTransitionEnd
.
Dostępny jest jeden rodzaj zdarzenia przejścia.
oTransitionEnd
Zdarzenie na zakończeniu transformacji.
transitionend
Zdarzenie na zakończeniu transformacji. Jeśli przejście zostanie usunięte przed zakończeniem, zdarzenie nie zostanie uruchomione.
Przepełnienie stosu: jak normalizować funkcje przejścia CSS3 w różnych przeglądarkach?
Aktualizacja
Wszystkie współczesne przeglądarki obsługują teraz nieokreślone zdarzenie:
element.addEventListener('transitionend', callback, false);
https://caniuse.com/#feat=css-transitions
Korzystałem z podejścia podanego przez Pete'a, ale teraz zacząłem stosować następujące
Alternatywnie, jeśli używasz bootstrap, możesz po prostu to zrobić
Jest tak, ponieważ zawierają one następujące pliki w pliku bootstrap.js
Należy pamiętać, że zawierają one także funkcję emulateTransitionEnd, która może być potrzebna do zapewnienia, że zawsze nastąpi wywołanie zwrotne.
http://blog.alexmaccaw.com/css-transitions
źródło
Wszystkie współczesne przeglądarki obsługują teraz nieokreślone zdarzenie:
element.addEventListener('transitionend', callback, false);
Działa w najnowszych wersjach Chrome, Firefox i Safari. Nawet IE10 +.
źródło
W Operze 12, gdy łączysz się za pomocą zwykłego JavaScript, „oTransitionEnd” będzie działać:
jednak jeśli łączysz się przez jQuery, musisz użyć „otransitionend”
Jeśli korzystasz z Modernizr lub bootstrap-przejście.js, możesz po prostu dokonać zmiany:
Można znaleźć tutaj również informacje http://www.ianlunn.co.uk/blog/articles/opera-12-otransitionend-bugs-and-workarounds/
źródło
Tylko dla zabawy, nie rób tego!
źródło
Jeśli chcesz po prostu wykryć tylko jeden koniec przejścia, bez korzystania ze struktury JS, oto mała wygodna funkcja narzędziowa:
Stosowanie:
to jeśli chcesz anulować w pewnym momencie, nadal możesz to zrobić
Jest również dobry do innych zastosowań związanych z wydarzeniami :)
źródło