Animacion css y javascript

[Ddsdone]

Tengo lo siguiente:
Javascript:

Código Javascript:

var objeto = document.getElementById("pj"),
    boton = document.getElementById("boton-dragon");
 
boton.addEventListener("click", function(){
    objeto.style.height = objeto.style.height == "200px" ? "auto" : "200px";
}, false);;
 

Css:

Código CSS:

#pj {
    background-color:#333;
    color:#fff;
    width:400px;
    height:auto;
    overflow:auto;
    border-radius:6px;
    padding:5px;
    text-align:center;
    margin:10px;
    transition: all 300ms ease ;
}
#boton-dragon {
    background-color: RGBA(255, 100, 120, 0.1);
    color:#fff;
    width:100px;
    height:20px;
    border-radius:6px;
    padding:5px;
    text-align:center;
    margin:10px;
}
#boton-dragon:hover {
    background-color:RGBA(255,255,255,1);
    color:#333;
}
 

HTML:

Código HTML:

<div id="pj">
    <div id="boton-dragon">Hola</div>
</div>
 

Cuando le doy click al boton me agranda la ventana "pj" pero no lo hace con una animacion, sino que solo cambia de la nada.

Existe forma de animarla?

http://jsfiddle.net/64b4x/