Обратный вызов при завершении перехода CSS3

Я хотел бы потушить элемент (изменив его непрозрачность на 0), а затем, когда закончите, удалить элемент из DOM.

В jQuery это просто, так как вы можете указать «Удалить», которое должно произойти после завершения анимации. Но если я хочу анимировать с помощью CSS3-переходов, есть ли способ узнать, когда переход / анимация завершены?

Для переходов вы можете использовать следующее для определения конца перехода через jQuery:

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

У Mozilla есть отличная ссылка:

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

Для анимации это очень похоже:

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

Обратите внимание, что вы можете передавать все строки событий с префиксом браузера одновременно в метод bind (), чтобы поддерживать срабатывание события во всех браузерах, которые его поддерживают.

Обновить:

Согласно комментарию, оставленному Duck: вы используете .one()метод jQuery, чтобы обработчик срабатывал только один раз. Например:

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

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

Обновление 2:

bind()Метод jQuery устарел, и on()метод является предпочтительным с jQuery 1.7.bind()

Вы также можете использовать off()метод в функции обратного вызова, чтобы обеспечить его запуск только один раз. Вот пример, который эквивалентен использованию one()метода:

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

Ссылки:

• .off()

• .one()

Другой вариант - использовать jQuery Transit Framework для обработки ваших переходов CSS3. Переходы / эффекты хорошо работают на мобильных устройствах, и вам не нужно добавлять ни одной беспорядочной CSS3-переходы в ваш CSS-файл для создания анимационных эффектов.

Вот пример, при котором непрозрачность элемента будет изменена на 0 при нажатии на него, и будет удалена после завершения перехода:

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

JS Fiddle Demo

Существует animationendсобытие, которое можно наблюдать, см. Документацию здесь , также для transitionанимации CSS вы можете использовать transitionendсобытие

Нет необходимости в дополнительных библиотеках, все они работают с vanilla 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>

Для тех, кому это может пригодиться, вот зависимая от jQuery функция, с которой я успешно справился, применив CSS-анимацию через класс CSS, а затем получил обратный вызов. Возможно, он не работает идеально, поскольку он использовался в приложении Backbone.js, но, возможно, полезен.

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();
}

Я использовал это вроде как это

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

Оригинальная идея от http://mikefowler.me/2013/11/18/page-transitions-in-backbone/

И это кажется удобным: http://api.jqueryui.com/addClass/

Обновить

После борьбы с приведенным выше кодом и другими опциями я бы предложил быть очень осторожным с любым прослушиванием концов CSS-анимации. При наличии нескольких анимаций это может очень быстро запутаться для прослушивания событий. Я настоятельно рекомендую использовать библиотеку анимации, такую ​​как GSAP, для каждой анимации, даже для небольших.

Принятый ответ в настоящее время запускается дважды для анимации в Chrome. Предположительно, это потому, что он признает, webkitAnimationEndа также animationEnd. Следующее, безусловно, будет срабатывать только один раз:

/* 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);
        });