Техника завершения анимации CSS3

Question

Итак, я хотел открыть диалог в сообществе о различных методах, которые люди использовали для определения окончания анимации. Особенно когда что-то исчезает (непрозрачность чтения).

Теперь я не уверен, что использовали другие люди, но я нашел особенно эффективным использовать тайм-аут, чтобы дождаться окончания анимации, а затем спрятать его, вот так (очевидно, используя jQuery):

$('#someDiv').css({'opacity':0});
setTimeout(function(){$('#someDiv').hide()}, 500);

где CSS выглядит так:

#someDiv {
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

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

Что вы думаете о различных техниках, которые существуют? Поскольку это относительно новый и недокументированный документ, давайте посмотрим, что люди используют!

Спасибо, ребята! -Geoff

Answer 1

Для этого есть событие под названием

transitionend

, что имеет гораздо больший смысл, чем использование setTimeout.

Так что вы должны идти как

$('#someDiv').css({'opacity':0}).on('transitionend', function(e) {
    $(this).hide();
});

---

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

var dummy           = document.createElement( 'div' ),
    eventNameHash   = { webkit: 'webkitTransitionEnd', Moz: 'transitionend', O: 'oTransitionEnd', ms: 'MSTransitionEnd' },
    transitionEnd   = (function _getTransitionEndEventName() {
        var retValue = 'transitionend';

        Object.keys( eventNameHash ).some(function( vendor ) {
            if( vendor + 'TransitionProperty' in dummy.style ) {
                retValue = eventNameHash[ vendor ];
                return true;
            }
        });

        return retValue;
    }());

Так что используйте этот код для условной загрузки правильного имени события, а затем используйте переменную transitionEnd для имени привязки .on().

Пример: http://jsfiddle.net/QBFtH/1/