JSFiddle - React, Tailwind, and code Playground

by Can

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<a href="#" id="button">Click me</a>
<div class="box"></div>

CSS

.box { width: 100px; height: 100px; background: red }
.animate {
    width: 300px;
    height: 300px;
    background: tomato;
    -webkit-transition: height 1s ease-in, width 1s ease-in;
	-moz-transition: height 1s ease-in, width 1s ease-in;
	-o-transition: height 1s ease-in, width 1s ease-in;
	-ms-transition: height 1s ease-in, width 1s ease-in;
	transition: height 1s ease-in, width 1s ease-in; 
}

JavaScript

// With Modernizr.prefixed()

var transEndEventNames = {
    'WebkitTransition' : 'webkitTransitionEnd',
    'MozTransition' : 'transitionend',
    'OTransition' : 'oTransitionEnd',
    'msTransition' : 'MStransitionEnd',
    'transition' : 'transitionend'
},

transitionEndEventName = transEndEventNames [
    Modernizr.prefixed('transition')
];

$('#button').on('click', function() {
    $('.box').addClass('animate');
    $('.box').one(transitionEndEventName, function () {        
        alert('do stuff when transition ends');
    });
});