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

Question

Quiero utilizar una transición de color CSS3 para aplicar un efecto de color de desvanecimiento de resaltado (amarillo a transparente) a los nuevos elementos añadidos al marcado usando 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'); 
}); 

Cuando pulso en el enlace, se crea el nuevo elemento. Su clase es "nueva" (color de fondo amarillo) y se agrega 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/

Answer 1

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

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

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

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

que era capaz de conseguir esto para trabajar 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; 
} 

sólo se aplica a la clase más destacado de nuevos elementos:

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

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

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

Tengo este método de este libro en Safari Books Online: http://bit.ly/11iVv4M