JSFiddle - React, Tailwind, and code Playground

by cfddream

HTML

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

CSS

#someDiv {
     -webkit-animation: NAME-YOUR-ANIMATION 5s 1 forwards;
     -moz-animation:    NAME-YOUR-ANIMATION 5s 1 forwards;
     -ms-animation:     NAME-YOUR-ANIMATION 5s 1 forwards;
     -o-animation:      NAME-YOUR-ANIMATION 5s 1 forwards;
    
    width: 200px;
    height: 200px;
    background-color: blue;        
    color: white;
}

@-webkit-keyframes NAME-YOUR-ANIMATION {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}
@-moz-keyframes NAME-YOUR-ANIMATION {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}
@-ms-keyframes NAME-YOUR-ANIMATION {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}
@-o-keyframes NAME-YOUR-ANIMATION {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

JavaScript

var dummy           = document.createElement( 'div' ),
    eventNameHash   = { webkit: 'webkitAnimationEnd', Moz: 'animationend', O: 'oAnimationEnd', ms: 'msAnimationEnd' },
    transitionEnd   = (function _getTransitionEndEventName() {
        var retValue = 'animationend';
        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(e.originalEvent.animationName)
});