Transición CSS3 para resaltar los nuevos elementos creados en JQuery

Quiero usar una transición de color CSS3 para aplicar un efecto de color de resaltado de resaltado (amarillo a transparente) a los nuevos elementos añadidos a la marca utilizando 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

 
add new element

JS

 $('#add-element').click(function() { var newElement = $('
new element
'); $('#content').append(newElement); newElement.removeClass('new'); });

Cuando hago clic en el enlace, se crea el nuevo elemento. Su clase es “nueva” (color de fondo amarillo) y se anexa al marcado HTML. Debería poder eliminar inmediatamente la clase “nueva” para activar la transición de color de fondo a transparente (o cualquier otro color). Obviamente lo estoy haciendo mal, ya que el color de fondo del nuevo elemento se muestra inmediatamente como transparente, sin efecto de transición. Sé que puedo hacer esto en la interfaz de usuario de JQuery, pero me gustaría usar las transiciones CSS3.

jsfiddle aquí:

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

Pude conseguir que esto funcionara con la animación 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; } 

Solo aplique la clase de resaltado a los nuevos elementos:

 $('#add-element').click(function() { var newElement = $('
new element
'); $('#content').append(newElement); });

Probé en IE 10, Chrome, Safari y el último FF y funciona allí. Probablemente no funcionará en IE 9 y por debajo …

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

Obtuve este método de este libro en Safari Books Online: http://my.safaribooksonline.com/9780132366847/ch05lev1sec2?link=f1184788-851e-4eb6-bb0b-61cb0fb7756d&cid=shareLink

Su código es casi perfecto. Solo tienes que activar algo para que la transición funcione. Esto se puede hacer agregando 1 línea de código a su script.

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

http://jsfiddle.net/UXfqd/

Es un truco feo, pero parece funcionar. Estoy seguro de que hay una mejor manera.

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

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