Oddzwonienie po zakończeniu przejścia CSS3

Chciałbym wyciszyć element (zmieniając jego krycie na 0), a następnie po zakończeniu usuń element z DOM.

W jQuery jest to proste, ponieważ można określić opcję „Usuń”, która ma się odbywać po zakończeniu animacji. Ale jeśli chcę animować za pomocą przejść CSS3, czy mogę wiedzieć, kiedy przejście / animacja została zakończona?

W przypadku przejść możesz użyć następującego polecenia do wykrycia końca przejścia za pomocą jQuery:

$("#someSelector").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });

Mozilla ma doskonałe referencje:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#Detecting_the_start_and_completion_of_a_transition

W przypadku animacji jest bardzo podobny:

$("#someSelector").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ ... });

Zauważ, że możesz przekazać wszystkie ciągi zdarzeń poprzedzone przeglądarką do metody bind () jednocześnie, aby obsługiwać uruchamianie zdarzeń we wszystkich przeglądarkach, które je obsługują.

Aktualizacja:

Zgodnie z komentarzem pozostawionym przez Ducka: używasz .one()metody jQuery, aby mieć pewność, że program obsługi odpali tylko raz. Na przykład:

$("#someSelector").one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });

$("#someSelector").one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ ... });

Aktualizacja 2:

bind()Metoda jQuery jest przestarzała, a on()metoda jest preferowana od dnia jQuery 1.7.bind()

Możesz także użyć off()metody w funkcji wywołania zwrotnego, aby mieć pewność, że zostanie ona uruchomiona tylko raz. Oto przykład równoważny z użyciem one()metody:

$("#someSelector")
.on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd",
 function(e){
    // do something here
    $(this).off(e);
 });

Bibliografia:

• .off()

• .one()

Inną opcją byłoby użycie jQuery Transit Framework do obsługi przejść CSS3. Przejścia / efekty działają dobrze na urządzeniach mobilnych i nie musisz dodawać ani jednego wiersza niechlujnych przejść CSS3 w pliku CSS, aby wykonać efekty animacji.

Oto przykład, który zmieni krycie elementu na 0 po kliknięciu i zostanie usunięty po zakończeniu przejścia:

$("#element").click( function () {
    $('#element').transition({ opacity: 0 }, function () { $(this).remove(); });
});

JS Fiddle Demo

Jest to animationendwydarzenie, które można zaobserwować w dokumentacji zobaczyć tutaj , również dla CSS transitionanimacji można użyć transitionendzdarzenia

Nie ma potrzeby stosowania dodatkowych bibliotek, które działają z waniliowym JS

document.getElementById("myDIV").addEventListener("transitionend", myEndFunction);
function myEndFunction() {
	this.innerHTML = "transition event ended";
}

#myDIV {transition: top 2s; position: relative; top: 0;}
div {background: #ede;cursor: pointer;padding: 20px;}

<div id="myDIV" onclick="this.style.top = '55px';">Click me to start animation.</div>

Dla każdego, dla kogo może się to przydać, oto funkcja zależna od jQuery, z którą udało mi się zastosować animację CSS za pośrednictwem klasy CSS, a następnie uzyskać oddzwonienie. Może nie działać idealnie, ponieważ miałem go w aplikacji Backbone.js, ale może być użyteczny.

var cssAnimate = function(cssClass, callback) {
    var self = this;

    // Checks if correct animation has ended
    var setAnimationListener = function() {
        self.one(
            "webkitAnimationEnd oanimationend msAnimationEnd animationend",
            function(e) {
                if(
                    e.originalEvent.animationName == cssClass &&
                    e.target === e.currentTarget
                ) {
                    callback();
                } else {
                    setAnimationListener();
                }
            }
        );
    }

    self.addClass(cssClass);
    setAnimationListener();
}

Użyłem tego w ten sposób

cssAnimate.call($("#something"), "fadeIn", function() {
    console.log("Animation is complete");
    // Remove animation class name?
});

Oryginalny pomysł z http://mikefowler.me/2013/11/18/page-transitions-in-backbone/

I wydaje się to przydatne: http://api.jqueryui.com/addClass/

Aktualizacja

Po zmaganiu się z powyższym kodem i innymi opcjami sugerowałbym bardzo ostrożność przy każdym zakończeniu odsłuchu animacji CSS. Przy wielu animacjach może to bardzo szybko zepsuć się podczas słuchania wydarzeń. Zdecydowanie polecam bibliotekę animacji, taką jak GSAP, dla każdej animacji, nawet tej małej.

Akceptowana odpowiedź jest obecnie uruchamiana dwukrotnie dla animacji w Chrome. Przypuszczalnie dzieje się tak, ponieważ rozpoznaje webkitAnimationEndrównież animationEnd. Następujące elementy z pewnością wystrzelą tylko raz:

/* From Modernizr */
function whichTransitionEvent(){

    var el = document.createElement('fakeelement');
    var transitions = {
        'animation':'animationend',
        'OAnimation':'oAnimationEnd',
        'MSAnimation':'MSAnimationEnd',
        'WebkitAnimation':'webkitAnimationEnd'
    };

    for(var t in transitions){
        if( transitions.hasOwnProperty(t) && el.style[t] !== undefined ){
            return transitions[t];
        }
    }
}

$("#elementToListenTo")
    .on(whichTransitionEvent(),
        function(e){
            console.log('Transition complete!  This is the callback!');
            $(this).off(e);
        });