CSS3 JQueryで作成された新しい要素を強調表示するトランジション

Question

CSS3のカラートランジションを使用して、JQueryを使用してマークアップに追加された新しい要素にハイライトフェーディングカラーエフェクト（黄色から透明）を適用します。

CSS

#content div { 
    background-color:transparent; 
    -moz-transition:background-color 2s; 
    -webkit-transition:background-color 2s; 
    -o-transition:background-color 2s; 
    transition:background-color 2s; 
} 

#content div.new { 
    background-color:yellow; 
} 

HTML

<div id="content"></div> 
<a id="add-element" href="#">add new element</a> 

私はリンクをクリックするとJS

$('#add-element').click(function() { 
    var newElement = $('<div class="new">new element</div>'); 
    $('#content').append(newElement); 
    newElement.removeClass('new'); 
}); 

、新しい要素が作成されます。そのクラスは "new"（背景色は黄色）で、HTMLマークアップに追加されています。 "新しい"クラスをすぐに削除して、背景色を透明（または他の色）に遷移させる必要があります。私は明らかにそれを間違っている、新しい要素の背景色は、トランジション効果なしですぐに透明として表示されます。 JQuery UIでこれを行うことができますが、私はCSS3トランジションを使いたいと思います。ここ

jsfiddle：

http://jsfiddle.net/paulaner/fvv5q/

Answer 1

それは醜いハックですが、動作しているようです。 良い方法があると確信しています。

$('#add-element').click(function() { 
    var newElement = $('<div class="new">new element</div>'); 
    $('#content').append(newElement); 
    setTimeout(function(){ 
     newElement.removeClass('new'); 
    },0); 
}); 

http://jsfiddle.net/fvv5q/22/

Answer 2

あなたのコードはほぼ完璧です。あなたは、トランジションを動作させるために何かをトリガーする必要があります。スクリプトに1行のコードを追加することでこれを行うことができます。

$('#add-element').click(function() { 
    var newElement = $('<div class="new">new element</div>'); 
    $('#content').append(newElement); 
    // trigger on focus on newly created div 
    newElement.focus(); 

    newElement.removeClass('new'); 
}); 

http://jsfiddle.net/UXfqd/

Answer 3

私は、これはCSS3アニメーションで動作するように取得することができた：

@-webkit-keyframes yellow-fade { 
    0% {background: yellow;} 
    100% {background: none;} 
} 

@keyframes yellow-fade { 
    0% {background: yellow;} 
    100% {background: none;} 
} 

.highlight { 
    -webkit-animation: yellow-fade 2s ease-in 1; 
    animation: yellow-fade 2s ease-in 1; 
} 

ただ、新しい要素をハイライトクラスを適用します。

$('#add-element').click(function() { 

    var newElement = $('<div class="highlight">new element</div>'); 

    $('#content').append(newElement); 

}); 

私はIE 10、Chrome、Safari、最新のFFでテストして、そこで動作します。 http://bit.ly/11iVv4M