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

Question

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

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

Answer 1

Для переходов вы можете использовать следующее, чтобы определить конец перехода через 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 () для поддержки запуска события во всех браузерах, которые его поддерживают.

Обновление:

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

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

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

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

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

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

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

Ссылки:

• .off()

• .one()

Answer 2

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

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

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

JS Fiddle Demo

Answer 3

Для тех, кому это может пригодиться, вот зависимая от 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 для каждой анимации, даже для небольших.

Answer 4

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

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

#myDIV {transition: top 2s; position: relative; top: 0;}

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

Answer 5

Принятый ответ в настоящее время срабатывает дважды для анимации в 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);
        });