JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://modernizr.com/downloads/modernizr.js"></script>
<h2>Les évènements JS</h2>
<div id="vdo-10">Cliquez-moi!</div>

CSS

body{
    padding: 70px;
    font: 1em sans-serif;
}
h2{
    font-size: 1.6em;
}
#vdo-10{
    width: 300px;
    height: 100px;
    line-height: 100px;
    padding: 0 0 0 30px;
    margin-top: 30px;
    background: crimson;
}
#vdo-10{
    -webkit-transition: width 1s linear, background-color 1s linear;
       -moz-transition: width 1s linear, background-color 1s linear;
         -o-transition: width 1s linear, background-color 1s linear;
            transition: width 1s linear, background-color 1s linear;
}
#vdo-10.anim{
    background: orangered;
    width: 450px;
}

JavaScript

$(function(){

    $('[id^=vdo]').click(function(e){
        $(this).toggleClass('anim');                
    });
    
    var transEndEventNames = {
    'WebkitTransition' : 'webkitTransitionEnd',
    'MozTransition'    : 'transitionend',
    'OTransition'      : 'oTransitionEnd',
    'transition'       : 'transitionend'
    },
    transEndEventName = transEndEventNames[Modernizr.prefixed('transition') ];   

    var elem = document.getElementById('vdo-10');
    elem.addEventListener(transEndEventName, function(e){
        alert('La transition "'+e.propertyName+'" est finie!');
    }, false);

});