Transition CSS3 pour mettre en évidence les nouveaux éléments créés dans JQuery
je veux utiliser une transition de couleur CSS3 pour appliquer un effet de couleur de décoloration en surbrillance (jaune à transparent) aux nouveaux éléments ajoutés au markup en utilisant 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');
});
Quand je clique sur le lien, le nouvel élément est créé. Sa classe est " new " (couleur de fond jaune) et il est ajouté au markup HTML. Je devrais être capable de supprimer immédiatement la classe "new" pour déclencher la couleur de fond transition vers transparent (ou n'importe quelle autre couleur). Je le fais évidemment mal, puisque la couleur de fond du nouvel élément est immédiatement affichée comme transparente, sans effet de transition. Je sais que je peux le faire en jQuery UI, mais j'aimerais utiliser les transitions CSS3.
jsfiddle ici:
http://jsfiddle.net/paulaner/fvv5q/
3 réponses
j'ai été en mesure d'obtenir que cela fonctionne avec css3 animation:
@-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;
}
il suffit d'appliquer la classe highlight aux nouveaux éléments:
$('#add-element').click(function() {
var newElement = $('<div class="highlight">new element</div>');
$('#content').append(newElement);
});
j'ai testé dans IE 10, Chrome, Safari, et la dernière FF et il fonctionne là. Ça ne marchera probablement pas à 9 ans et moins...
http://jsfiddle.net/nprather/WKSrV/3/
j'ai obtenu cette méthode de ce livre dans les livres de Safari Ligne: http://my.safaribooksonline.com/9780132366847/ch05lev1sec2?link=f1184788-851e-4eb6-bb0b-61cb0fb7756d&cid=shareLink
Votre code est presque parfait. Il suffit de déclencher quelque chose pour que la transition fonctionne. Ceci peut être fait en ajoutant 1 ligne de code à votre 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');
});
c'est un vilain piratage, mais ça a l'air de marcher. Je suis sûr qu'il ya une meilleure façon.
$('#add-element').click(function() {
var newElement = $('<div class="new">new element</div>');
$('#content').append(newElement);
setTimeout(function(){
newElement.removeClass('new');
},0);
});