Javascript

JavaScript permet de gérer par programmation, les propriétés de transition et les événements liés.

Prenons l'exemple d'une div :

1
<div id="elt"></div>

Dans notre script, nous récupérons dans la constante elt la div. On lui ajoute son style de départ.

1
const elt = document.querySelector("div#elt");
2
elt.style.border = "2px solid black";
3
elt.style.width = "100px";
4
elt.style.height = "100px";
5
elt.style.backgroundColor = "red";
6
DéfinitionPropriétés
transitionProperty
1
elt.style.transitionProperty = "width, background-color";
transitionDuration
1
elt.style.transitionDuration = "3s";
transitionDelay
1
elt.style.transitionDelay = "2s";
transitionTimingFunction
1
elt.style.transitionTimingFunction = "cubic-bezier(0.1, 0.6, 0.9, 0.4)";
Au mouseover, on modifie les CSS
1
elt.addEventListener("mouseover", () => {
2
    elt.style.width = "200px";
3
    elt.style.backgroundColor = "green";
4
});
Au mouseout, on remet les CSS d'origines
1
elt.addEventListener("mouseout", () => {
2
    elt.style.width = "100px";
3
    elt.style.backgroundColor = "red";
4
});
 
 
 



Principe de transition
DéfinitionÉvénements
Pour chaque propriété de style déclarée dans transitionProperty, un événement de début, un événement de fin, un événement de démarrage après un délai sont déclenchés.
transitionrun : déclenché au début d'une transition
1
elt.addEventListener("transitionrun ", event => {
2
    console.log(event);
3
});
transitionstart : déclenché après le retard potentiel (transitionDelay ).
1
elt.addEventListener("transitionrun ", event => {
2
    console.log(event);
3
});
transitionend : déclenché à la fin de la transition.
1
elt.addEventListener("transitionrun ", event => {
2
    console.log(event);
3
});
Les propriétés propertyName (nom du CSS modifié) et elapsedTime (durée de seconde de la transition) sont ajoutées à l'objet event.