HTML要素の作成と作成後のアニメーション

Question

私はオーバーレイ（モーダルやダイアログボックスの背景）を作成していますが、要素を作成するとフェードインします。私は.visibleクラスをCSS3トランジションを使って要素に追加/削除してアニメーションを行います。

# SASS styles 
.overlay { 
    background-color: rgba(0, 0, 0, 0.6); 
    cursor: pointer; 
    height: 100%; 
    left: 0; 
    position: fixed; 
    pointer-events: none; 
    top: 0; 
    width: 100%; 
    will-change: opacity; 
    @include transparency(0); 
    @include transition(opacity 0.3s cubic-bezier(0, 0, 0.3, 1)); 

    &.visible { 
    pointer-events: auto; 
    @include transparency(1.0); 
    } 
} 

オーバーレイ要素がすでにDOMに存在する場合、すべてがうまく動作します：

$(".overlay").addClass("visible") # => does animation as expected... 

しかし、私は要素を作成し、それをアニメーション化しようとすると、そうでない：

# JavasScript using jQuery 
tag = $("<div class='overlay'></div>") 
$("body").append(tag) 
tag.addClass("visible") 

JavaScriptがクラスを作成して「即時に」追加していることがわかっているので、これを行う必要があります：

tag = $("<div class='overlay'></div>") 
$("body").append(tag) 
tag.hide() 
tag.show() 
tag.addClass("visible") 

要素を「隠して」表示することで、要素をアニメーション化するのに十分な時間が追加クラスに与えられます。

質問 これは、要素を表示/非表示にするために非常にハッキリなので、CSSトランジションでアニメーションできます。これを実装するクリーナーの方法はありますか？

Answer 1

「クリーナー」見る人の目であるが、1つの簡単な方法は、あなたが目に見えるクラスを追加する前にダニを待つことである。

$("body").append(tag); 
setTimeout(function() { 
    tag.addClass("visible"); 
}, 0); 

添付が追加する前に完了するまで待つだろうとクラス。 0の値を高く設定する必要があります。