JSFiddle - React, Tailwind, and code Playground

HTML

<div id='test' style='border:1px solid black; margin:10px; padding:15px;'>Click me, and I will disappear with nice transitions.<br /><br />
    However, in Chrome 31 the variable foo in line 4 must be in place, or the transition will fail. Why???<br /> <br />bla bla bal asdølkjasdfl adlskfj nadslkfj nasdfkj fkjasd,fj abf, jasdbf ,fba,dfj afd,k jabf ,ajsdfb akfj nasd,fj ads,f jadsf ,ksajdfn ,asdjf a,fj sd, jsdf,k jasdnf kajsdfn akfj nsd,kfj nasdfkj snf, kjadnf askjdfn a,kfj naskfjansdf,k jsandf,k ajfn ,fdjn a,sdkfjn asdfkj nasdf,k jasndf, akjdfn a,fj asd</div>
<div style='border:1px solid black; margin:10px; padding:15px;'>bla bla bal asdølkjasdfl adlskfj nadslkfj nasdfkj fkjasd,fj abf, jasdbf ,fba,dfj afd,k jabf ,ajsdfb akfj nasd,fj ads,f jadsf ,ksajdfn ,asdjf a,fj sd, jsdf,k jasdnf kajsdfn akfj nsd,kfj nasdfkj snf, kjadnf askjdfn a,kfj naskfjansdf,k jsandf,k ajfn ,fdjn a,sdkfjn asdfkj nasdf,k jasndf, akjdfn a,fj asd</div>

CSS

.test{
    transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;    
}

JavaScript

$(document).on("click","#test",function(){
    var r =$(this).css("height")
    $(this).css("height", r)
    //var foo = $("#test").css("height")
    this.offsetHeight;
    $(this).addClass("test")

    $("#test").css("opacity","0")
    setTimeout(afterWait,1000)
})

function afterWait()
{
    $("#test").css({
        height : "0",
        margin : "0px 10px",
        padding: "0px 10px"
    })
}