JSFiddle - React, Tailwind, and code Playground

by rodneyrehm

HTML

<div id="foo"></div>

CSS

#foo {
    padding: 30px;
    width: 200px;
    min-height: 100px;
    background-color: #F00;
    color: #FFF;
    white-space: pre;

    -webkit-transition: width 1s;
       -moz-transition: width 1s;
            transition: width 1s;
}
#foo:hover {
    width: 300px;
}

JavaScript

// http://www.w3.org/TR/css3-transitions/
// https://developer.mozilla.org/en/CSS/CSS_transitions
// http://developer.apple.com/library/safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Transitions/Transitions.html
// http://www.opera.com/docs/specs/presto25/css/transitions/

// sadly no event to notify of begin of transition

$('#foo').on('webkitTransitionEnd oTransitionEnd transitionend', function(e) {
    var $this = $(this);
    $this.text($this.text() 
        + "ended '" + e.originalEvent.propertyName 
        + "' after " + e.originalEvent.elapsedTime.toFixed(2) + "s\n" );
    // e.originalEvent.propertyName : "width"
    // e.originalEvent.elapsedTime : ~1
});