Зворотний виклик після завершення переходу 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 () одночасно для підтримки запуску події у всіх браузерах, які його підтримують.

Оновлення:

Відповідно до коментаря, який залишив Дак: ви використовуєте .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

Є animationendподія, яку можна спостерігати, дивіться тут документацію , також для transitionанімації css, яку ви могли використовуватиtransitionend подія

Немає необхідності в додаткових бібліотеках, всі вони працюють з ванільним 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);
        });