Как определить конец перехода без библиотеки JavaScript? - PullRequest
Новая
       22

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

9 голосов
/ 11 января 2012

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

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

Ответы [ 3 ]

15 голосов
/ 11 января 2012 
element.addEventListener('transitionend', function(event) {
    alert("CSS Property completed: " + event.propertyName);
}, false );

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

По завершении переходов происходит одно событие.
Во всех браузерах, соответствующих стандарту, событие transitionend,
в WebKit это webkitTransitionEnd.

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

3 голосов
/ 11 января 2013

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

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

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

Помните, что примеры в Github README.md используют jQuery, но библиотека действительно требует никаких библиотек и без зависимостей как написано в ванильном javascript.

1 голос
/ 02 января 2017

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

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