Transizione CSS3 per evidenziare i nuovi elementi creati in JQuery

Question

Desidero utilizzare una transizione colore CSS3 per applicare un effetto colore di evidenziazione-dissolvenza (da giallo a trasparente) a nuovi elementi aggiunti al markup utilizzando 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'); 
}); 

quando clicco sul link, viene creato il nuovo elemento. La sua classe è "nuova" (colore di sfondo giallo) e viene aggiunta al codice HTML. Dovrei essere in grado di rimuovere immediatamente la "nuova" classe per attivare la transizione del colore di sfondo su trasparente (o qualsiasi altro colore). Ovviamente sto sbagliando, poiché il colore di sfondo del nuovo elemento è immediatamente mostrato come trasparente, senza effetto di transizione. So che posso farlo nell'interfaccia utente di JQuery, ma mi piacerebbe usare le transizioni CSS3.

jsfiddle qui:

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

Answer 1

E 'un brutto hack, ma sembra funzionare. Sono sicuro che c'è un modo migliore.

$('#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

Il codice è quasi perfetto. Devi solo attivare qualcosa per far funzionare la transizione. Questo può essere fatto aggiungendo 1 riga di codice al tuo script.

$('#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

sono stato in grado di ottenere questo a lavorare con CSS3 animazione:

@-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; 
} 

basta applicare la classe evidenziazione nuovi elementi:

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

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

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

}); 

Ho provato in IE 10, Chrome, Safari e l'ultimo FF e funziona lì. Probabilmente non funzionerà in IE 9 e sotto ...

http://jsfiddle.net/nprather/WKSrV/3/

ho ottenuto questo metodo da questo libro in Safari Books Online: http://bit.ly/11iVv4M