jQueryで生成した要素に対してaddClasssでアニメーションが効かない

もともと、html側で要素をつくった場合はうまくいきます。

[css]

    .box{
        width:100px;
        height:100px;
        background:tomato;
        transition: 3s;
    }

    .blue{
        background:skyblue;
    }





    [js]

    $(function(){
        //要素をつくる
        var box = $('<div class="box">');

        //表示する
        $('body').append(box);
        box.addClass('blue');//アニメーション

    });