【CSS3&JS】transitionendイベント

transitionendイベントをベンダごとにディテクトする。

by tea4two

HTML

<div id="someDiv">Hello World</div>

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;
    width: 200px;
    height: 200px;
    background-color: blue;
    color: white;
}

JavaScript

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

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