Avant, je veux dire avant la prochaine version 2.14 de Dotclear, on utilisait beaucoup de javascript et un peu de CSS pour faire varier le fond coloré de certains messages.
Donc il fallait une CSS :
.colorBeginMessage {
color: #ccc;
}
.colorEndMessage {
color: #676e78;
}Puis un peu de Javascript :
…
$('.message').backgroundFade({sColor: dotclear.fadeColor.beginMessage, eColor: dotclear.fadeColor.endMessage, steps:20});
…Avec entre les deux plein de code en javascript pour récupérer les couleurs en question — en créant des objets cachés pour chacune des couleurs et les stocker quelque part — puis ensuite en utilisant un plugin jQuery (/admin/js/jquery/jquery.bgFade.js) qu’il fallait charger et qui se chargeait de faire varier la couleur de fond de l’objet pointé en utilisant un certain nombre de pas.
Bref c’était compliqué !
Dans la 2.14 je suis passé à l’animation CSS 3, ce qui donne ceci, toujours pour un message (ayant la classe .message) :
.message {
background: #676e78 url(msg-std.png) no-repeat 0.7em 0.7em;
animation-name: kf-message;
animation-duration: .5s;
}
@keyframes kf-message {
0% {
background-color: #ccc;
}
100% {
background-color: #676e78;
}
}Et c’est tout !
Plus de javascript pour faire le job, c’est le navigateur qui gère ça uniquement avec la CSS ! Et donc plus de couleur à récupérer dans la CSS via un script javascript, plus de code à modifier pour modifier le nombre de pas vu qu’on est passé à une durée directement définie dans la CSS !
En détail le 0% correspond à l’état initial, le 100% à l’état final (vous pouvez rajouter des étapes intermédiaires si ça vous chante, par exemple avec un 50% { … }) et la durée (en seconde) égale pour les messages à une demi-seconde est suffisante lorsque l’état final est égal à l’état standard.
Si jamais vous vouliez faire un aller-retour, avec une valeur transitoire à mi-chemin, il sera sage de ralentir alors l’animation (j’utilise en général 1 seconde), comme par exemple avec la nouvelle classe .missing que j’ai ajouté pour indiquer un champ problématique :
.missing {
background-color: inherit;
animation-name: kf-missing;
animation-duration: 1s;
}
@keyframes kf-missing {
0% {
background-color: inherit;
}
50% {
background-color: #ffbaba;
}
100% {
background-color: inherit;
}
}Classe que je mets en place en javascript de cette façon, quand c’est utile :
…
$(e).addClass('missing').focusout(function() {
$(this).removeClass('missing');
});
e.focus();
…Si jamais dans vos développement vous utilisiez le plugin jQuery cité plus haut, sachez qu’il disparaîtra dans la 2.14 à venir !
1 De mirovinben -
Hein ?
Encore des changements ?
Pfiou, j’ai la tête qui tourne !
(et mes quelques neurones restant ont intérêt à se cramponner)
2 De Luc -
J’avais cru comprendre que tu avais levé le pied côté code ! ;-)
3 De Franck -
Oui, pourquoi ? :-)
4 De mirovinben -
Hum…
Et si j’écrivais plutôt
Ou alors, il ne m’en reste qu’un.
Luc, quand on est motard, on lève souvent le pied sans pour autant s’arrêter.
5 De Luc -
Franck et Mirovinben : c’était une simple remarque du dimanche matin.
Après, je ne suis ni codeur ni motard ! ;-)
6 De mirovinben -
Luc, moi non plus.
Ni motard (<troll>Dieu me garde ! </troll>), ni codeur (de moins en moins : voir “neurone(s)” plus haut dans la conversation).
;-)
7 De Philippe -
C’est bien ici quand tu parles de code : on apprend un truc par jour :)