JSFiddle - React, Tailwind, and code Playground

by meo

HTML

<script src="http://meodai.ch/alainbenoit/js/libs/modernizr-1.6.min.js"></script>
<div>

</div>

CSS

div {
    width: 300px;
    height: 300px;
    background: red;
}

JavaScript

(function($){
    
var options, browserPrefix, css3animate, transitionEndEvent;

options = {
    "speed": 500,
    "browserPrefix": {
        "webkit": "-webkit-",
        "mozilla": "-moz-",
        "opera": "-o-",
        "msie": "-ms-"
    }
};

if ($.browser.webkit) {
    browserPrefix = options.browserPrefix.webkit;
    transitionEndEvent = "webkitTransitionEnd";
} else if ($.browser.msie) {
    browserPrefix = options.browserPrefix.msie;
    transitionEndEvent = "TransitionEnd";
} else if ($.browser.mozilla) {
    browserPrefix = options.browserPrefix.mozilla;
    transitionEndEvent = "transitionend";
} else if ($.browser.opera) {
    browserPrefix = options.browserPrefix.opera;
    transitionEndEvent = "oTransitionEnd";
} else {
    browserPrefix = "";
}
 
css3animate = function($obj, cssObject, callback, speed) {
    if (!speed) {
        speed = options.speed;
    }
 
    if (Modernizr.csstransitions) {
        $obj.css(browserPrefix + "transition", "all " + speed + "ms ease-in-out");
 
        $obj.css(cssObject);
 
        $obj.bind(transitionEndEvent,function(event){
            $obj.unbind(transitionEndEvent);
            $.isFunction(callback) && callback($(event.target), event);
        });
    } else {      
        $obj.animate(cssObject, speed, function(){ $.isFunction(callback) && callback($(this)); });            
    }
};

$(function(){
    css3animate($("div"), {"height": "200px", "width": "400px"}, function($o){
         //console.log($o);
        alert("with callback");
    }, 1500);
});
}(jQuery));