Cross-browser transitionend event

by Glen Cheney

HTML

<script src="http://modernizr.com/downloads/modernizr-2.5.3.js"></script>
<button class="width">Test</button>
<div id='width-log'></div>

<button class="height">Test</button>
<div id='height-log'></div>

CSS

.width {
    width: 100px;
    -webkit-transition: width 1s;
    -moz-transition: width 1s;
    -o-transition: width 1s;
    -ms-transition: width 1s;
    transition: width 1s;
}

.width-transition {
    width: 150px
}

.height {
    margin-top: 20px;
    height: 100px;
    -webkit-transition: height 1s;
    -moz-transition: height 1s;
    -o-transition: height 1s;
    -ms-transition: height 1s;
    transition: height 1s;
}

.height-transition {
    height: 150px
}

JavaScript

var transEndEventNames = {
    'WebkitTransition' : 'webkitTransitionEnd',
    'MozTransition'    : 'transitionend',
    'OTransition'      : 'oTransitionEnd',
    'msTransition'     : 'MsTransitionEnd',
    'transition'       : 'transitionend'
},
transEndEventName = transEndEventNames[Modernizr.prefixed('transition')];

$('.width').on(transEndEventName, function () {
    console.log('width transition end');
    $('#width-log').text($('#width-log').text()+'#');
});

$('.height').on(transEndEventName, function () {
    console.log('height transition end');
    $('#height-log').text($('#height-log').text()+'#');
});


$('.width').on('click', function () {
    console.log('clicked width');
    $(this).toggleClass('width-transition');
});

$('.height').on('click', function () {
    console.log('clicked height');
    $(this).toggleClass('height-transition');
});