JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<div id="square1"></div>
<div id="square2" class="s1"></div>

CSS

#square1 {
    width: 100px;
    height: 100px;        
    position: absolute;
    left: 0;
    top: 0;
    background: blue;
    cursor: pointer;
}
#square2 {
    position: absolute;
}
.s1 {
    width: 100px;
    height: 100px; 
    display: none;
    position: absolute;
    left: 150px;
    top: 150px; 
}
.s2 {
    display: block;
    background: red;
    width: 50px;
    height: 50px;
    left: 175px;
    top: 175px;    
    -moz-transition: width 2s, height 2s, left 2s, top 2s;
    -webkit-transition: width 2s, height 2s, left 2s, top 2s;
    transition: width 2s, height 2s, left 2s, top 2s;
}

JavaScript

$("#square1").on("click", function() {
    $("#square2").css('display', 'block');
    _.delay(function(){
        $("#square2").removeClass("s1").addClass("s2");
    }, 100);
})