first - parent jquery

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

Question

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

<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 hago clic 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 JQuery UI, pero me gustaría usar las transiciones CSS3.

jsfiddle aquí:

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

Answer 1

Es un hack feo, pero parece funcionar. 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

Tu 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 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

Pude hacer 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 aplica la clase de resaltado a los 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 abajo ...

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

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