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


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

[code]

    [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');//アニメーション
    
        });
    
[/code]




[`requestAnimationFrame`](https://developer.mozilla.org/ja/docs/Web/API/Window/requestAnimationFrame)で1フレーム遅らせることで可能です。

[code]

        $(function(){
            //要素をつくる
            var box = $('<div class="box">');
    
            //表示する
            $('body').append(box);
            requestAnimationFrame(()=> box.addClass('blue'));//アニメーション
    
        });
[/code]

[code]

       .box{
            width:100px;
            height:100px;
            background:tomato;
            transition: 3s;
        }
    
        .blue{
            background:skyblue;
        }
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
[/code]




[`requestAnimationFrame`](https://developer.mozilla.org/ja/docs/Web/API/Window/requestAnimationFrame)で1フレーム遅らせることで可能です。

[code]

        $(function(){
            //要素をつくる
            var box = $('<div class="box">');
    
            //表示する
            $('body').append(box);
            requestAnimationFrame(()=> box.addClass('blue'));//アニメーション
    
        });
[/code]

[code]

       .box{
            width:100px;
            height:100px;
            background:tomato;
            transition: 3s;
        }
    
        .blue{
            background:skyblue;
        }
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
[/code]

