Как обнаружить конец перехода без библиотеки JavaScript?

Question

Я хотел бы удалить объект после того, как он сделан анимированием с помощью перехода CSS, но я не могу использовать библиотеку JavaScript.

Как я могу обнаружить, когда анимация сделана? Я использую перезвонить или же Пользовательское событие как-то?

Answer 1

element.addEventListener('transitionend', function(event) {
    alert("CSS Property completed: " + event.propertyName);
}, false );

На данный момент точное имя события не было стандартизировано. Вот цитата от Мд:

Существует одно событие, которое запускается при завершении переходов.
Во всех стандартных браузере это событие transitionend,
В Webkit это webkitTransitionEnd.

Вот скрипка для Webkit: http://jsfiddle.net/bngwy/

Answer 2

Поскольку в настоящее время я делаю то же самое, я поделюсь полезной кросс-браузерной реализацией из Маракана руководство.

   // First, we store the names of the event according to the browsers

   var navigatorsProperties=['transitionend','OTransitionEnd','webkitTransitionEnd'];

            //For each of them...
            for(var i in navigatorsProperties)
            {
                //We attach it to our overlay div
                el.addEventListener(navigatorsProperties[i],function()
                {
                    // Here's the code we want to fire at transition End
                      console.log('transition end');

                },false);
            }

Следует отметить, что IE10 поддерживает переходы с transitionend (видеть MSDN).

IE9 и ниже нет Поддержка переходов (см. caniuse.com ), поэтому вы не сможете прикрепить какой -либо список событий к концу перехода (так что не пытайтесь msTransitionend или что -то еще для этих браузеров).

РЕДАКТИРОВАТЬ: Читая документацию Modernizr на GitHub, я наткнулся на их страницу Cross-Browser Polyfills. Среди многих других полезных ссылок я нашел это маленькое, но чрезвычайно хорошее Сценарий перехода.

Не возражайте, что примеры в github readme.md используют jQuery, но библиотека действительно требует Нет библиотек а также Нет зависимостей Как написано в ванильном JavaScript.

Answer 3

Я не смог найти подходящую полифиль «переходной», которая отвечала моим требованиям. Так что, если вы хотите что -то для того, чтобы зацепить конец перехода один раз, используйте это:

(function() {
    var i,
        el = document.createElement('div'),
        transitions = {
            'transition':'transitionend',
            'OTransition':'otransitionend',  // oTransitionEnd in very old Opera
            'MozTransition':'transitionend',
            'WebkitTransition':'webkitTransitionEnd'
        };

    var transitionEnd = '';
    for (i in transitions) {
        if (transitions.hasOwnProperty(i) && el.style[i] !== undefined) {
            transitionEnd = transitions[i];
            break;
        }
    }

    Object.prototype.onTransitionEndOnce = function(callback) {
        if (transitionEnd === '') {
            callback();
            return this;
        }
        var transitionEndWrap = function(e) {
            callback(); 
            e.target.removeEventListener(e.type, transitionEndWrap);
        };
        this.addEventListener(transitionEnd, transitionEndWrap);
        return this;
    };
}());