CSS3 Przejście do podświetlenia nowych elementów utworzonych w JQuery

Question

Chcę użyć przejścia kolorów CSS3, aby zastosować efekt blaknięcia podświetlania (żółty do przezroczystego) do nowych elementów dodanych do znaczników za pomocą 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'); 
}); 

Kiedy klikam odnośnik, tworzony jest nowy element. Jego klasa jest "nowa" (kolor żółty w tle) i jest dołączana do znaczników HTML. Powinienem móc natychmiast usunąć "nową" klasę, aby wywołać przejście koloru tła do przezroczystego (lub dowolnego innego koloru). Oczywiście robię to źle, ponieważ kolor tła nowego elementu jest natychmiast wyświetlany jako przezroczysty, bez efektu przejścia. Wiem, że mogę to zrobić w JQuery UI, ale chciałbym użyć przejść CSS3.

jsfiddle tutaj:

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

Answer 1

Jest brzydki hack, ale wydaje się działać. Jestem pewien, że jest lepszy sposób.

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

Kod jest niemal doskonały. Musisz tylko wywołać coś, aby przejście było skuteczne. Można to zrobić, dodając 1 wiersz kodu do skryptu.

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

udało mi się uzyskać to do pracy przy animacji 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; 
} 

Wystarczy zastosować klasę podświetlający na nowe elementy:

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

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

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

}); 

Testowałem w IE 10, Chrome, Safari i najnowszym FF i działa tam. Prawdopodobnie nie działa w IE 9 i poniżej ...

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

mam tej metody z tej książki w Safari Books Online: http://bit.ly/11iVv4M