Transitions

On a vu avec les pseudo-classes et les media queries que l'on peut avoir une mise en forme qui change sous certaines conditions. L'idee des transitions est de decrire comment ces changements se font, parce par defaut c'est ... brut.

On va prendre un lien et le changer de couleur quand on le survole, comme ceci:

#delete-btn:hover {
  color: red;
}

Pour decrire comment on veux transitionner d'une couleur a une autre il faut specifier les au minimum les attributs transition-property et transition-duration.

transition-property va nous permettre d'enregistrer des proprietes que le navigateur va devoir surveiller et animer en cas de changement.

C'est important que je le phrase comme ca parce que j'ai deja vu des margoulins ecrire

* {
  transition-property: all;
}

qui veux dire "on transitionne toutes les proprietes de tous les elements", autant vous dire que c'est pas franchement respecteux des utilisateurs ayant des ordinateurs et telephones "modestes". Et puis ce qui set anime, l'est pour attirer l'oeil et si tout attire l'oeil, alors rien n'attire l'oeil.

bref,

transition-duration prend un temps. Type de valeur que l'on avait jamais encore vu jusqu'ici et qui peut s'ecrire en seconde ou en millisecondes, 1s et 1000ms etant equivalents.

A NOTER: pour les dimensions on pouvait se permettre d'ommettre l'unitee (px, em, vh, etc...) pour la valeur 0, mais dans la cas des durees il faut quand meme mettre s ou ms. J'imagine que quelque part c'est une limite technique avec laquelle on doit composer pour que le systeme ne confonde pas une dimension avec une duree.

Donc, dans le cas de notre bouton on pourrait avoir ceci :

#delete-btn:hover {
  color: red;
  
  transition-property:color;
  transition-duration:2s;
}

SAUF QUE, connerie, parce que vous remarquerez que la transition ne se fait que quand notre souris arrive sur l'element, la transition n'etant que dans le :hover alors elle n'existe que pendant que la souris est dessus, donc la transition n'existe plus quand la souris s'en va, donnant donc le changement abrut par defaut.

Il nous faudrait donc l'ecrire comme ceci

#delete-btn{
  transition-property:color;
  transition-duration:2s;
}

#delete-btn:hover {
  color: red;
}

Mais, c'etait une erreur interessante a faire, parceque si on specifie une transition dans le selecteur sans pseudo-classe et une autre dans la pseudo-classe :hover (ou une autre, je reste sur :hover pour l'exemple), alors on pourra avoir une transition d'entree et une transition de sortie differentes.

A l'entree celle contenue dans le selecteur avec pseudo-classe l'emportera parcequ'elle est active et parcequ'elle fait partie d'un selecteur plus specifique.

A la sortie on utilisera la transition dans le selecteur sans pseudo-classe parce celle avec sera inactive.

#delete-btn{
  transition-property:color;
  transition-duration:2s;
}

#delete-btn:hover {
  color: red;
  transition-duration:0.5s;
}

On remarque bien qu'il y a une transition d'entree et de sorties ayant des vitesse/duree differentes.

Les autres proprietes

On n'as pas que transition-property et transition-duration.

On a aussi:

transition-delay

qui permet de demarrer la transition en decale.

#confirm-link{
  transition-property:color;
  transition-duration:0.25s;
  transition-delay: 1s;
}

#confirm-link:hover {
  color: green;
  transition-delay: 0s;
}

transition-timing-function

Les fonctions de timing sont une maniere de specifier comment la transition accelere et deccelere au cours de sa duree. C'est ce qui sera le plus fondamental au feeling de votre transition.

Les fonctions les plus basiques sont

• linear, la plus facile a comprendre. Tout au long de l'animation, le changement se fera a une vitesse constante.
• ease-in, le changement commence doucement accelere de plus en plus vite
• ease-out, le changement commence tres vite et ralentit de plus en plus
• ease, qui est la fonction par defaut, accelere progressivement jusqu'au milieu de l'animation puis deccelre progressivement jusqu'a la fin de l'animation

Personnelement, j'utilise toujours ease-out comme point de depart et ca suffit dans 90% des cas.

On pourrait en faire tout un chapitre parce qu'il est possible de lourdement modifier les fonctions qui sont fournies au point de les rendre meconnaissables, mais on est pas la pour faire un cours d'animation.

En attendant vous pourrez trouver d'autres fonctions, modifiees ou non, ici : https://easings.net/

Facilement transitionnables

Il y a des proprietes qui sont plus faciles a calculer, et qui ralentissent beaucoup moins les machines quand on les animes.

// TODO en regle generale, c'est tout ce qui ne demande pas un recalcul de mise en page // TODO opacitiy scale, translate, transform, skew plutot que height, width, left, right, font-size

1,2,3, many

// TODO

Shorthand

// expliquer comment en mettre plusieurs pour faire une micro timeline et compound des effets