Tout en travaillant sur un post récent qui utilisait des transitions CSS, je suis tombé par hasard sur des révélations intéressantes complètement par accident. Commuter où vous placez la syntaxe de transition peut avoir un effet considérable sur la manière dont la transition est effectuée.
Aujourd'hui, nous allons passer en revue les différentes options de syntaxe de transition CSS et leur impact sur l'animation, que votre souris entre ou quitte le survol.
Événements de souris en CSS
Les transitions CSS nous permettent d'implémenter des animations simples sans JavaScript. Cependant, comme CSS n’en parle pas vraiment beaucoup, on pourrait penser que le fait de différer les effets de la souris au-dessus et du déplacement de la souris resterait quelque chose de pur dans le domaine de JavaScript. Après tout, il n’ya pas de support pour quelque chose comme ceci:
Cependant, il s'avère que vous pouvez réellement contrôler efficacement ces deux variables différentes. Ce n'est tout simplement pas un processus très intuitif. Regardons comment cela fonctionne.
Si vous voulez ignorer la discussion et aller directement à la syntaxe, CSS Tricks propose un bon exemple de cette technique.
La syntaxe normale: Entrée et sortie de la souris égales
Il existe différentes manières d’appliquer une transition CSS. Le premier que nous examinerons est l'ancien par défaut, ce qui signifie que nous utiliserons la syntaxe standard que vous trouverez si vous exécutez une recherche Google pour savoir comment implémenter une transition CSS.
À des fins d'expérimentation, la démonstration sera simple. Nous voulons que la transition anime le passage d’un carré noir à un cercle gris. Voici à quoi cela ressemble (préfixes de navigateur omis pour la propreté):
Le comportement de cette animation est typique. Lorsque vous survolez le carré noir, il tourne en l'espace d'une seconde et augmente le rayon de la bordure à 100 pixels et change de couleur, ce qui en fait un cercle gris. Ensuite, lorsque vous sortez votre souris, l'inverse se produit. Le carré tourne dans le sens inverse des aiguilles d'une montre pour revenir à sa position d'origine. Son rayon de bordure diminue régulièrement et sa couleur redevient noire.
Démo: Cliquez ici pour voir cet exemple en action.
Syntaxe inversée: pas de transition de la souris
Dans l'exemple précédent, nous avons placé la syntaxe de transition dans le #loremdiv sélecteur. Que se passe-t-il si nous inversons cela et plaçons le même extrait à l'intérieur du #loremdiv: survol sélecteur?
Même si cela semble faux, il s'avère que cela produit toujours une transition. Cependant, il seulement produit une transition sur l'événement de survol, lorsque l'utilisateur quitte le survol, la transformation est immédiate.
Cela nous donne effectivement ce que nous recherchions: un moyen de faire varier les transitions d’entrée et de sortie de la souris. Cependant, la sortie de souris n’est vraiment pas une transition du tout, ce qui n’est pas très excitant.
Démo: Cliquez ici pour voir cet exemple en action.
Syntaxe doublée: deux transitions personnalisables
Maintenant, nous avons essayé de lier la transition au sélecteur normal et de la placer dans le sélecteur de survol, voyons maintenant ce qui se passe lorsque nous mettons une transition tous les deux des endroits.
Remarquez que j'ai réduit le temps passé sur la première transition afin que nous puissions dire ce que cela fait. Chose intéressante, le résultat ici est à l'opposé de ce que beaucoup de gens attendent.
Intuitivement, vous pouvez en arriver à la conclusion que la première déclaration de transition sera appliquée à la souris avant et la seconde à la sortie de la souris. Cependant, le contraire est vrai. Comme nous l'avons découvert dans notre dernier exemple, l'extrait de code associé au sélecteur de survol affecte la souris en événement, laissant l'autre pour la souris.
Nous avons maintenant la configuration pour laquelle nous avons tourné! Cela nous donne une totale liberté pour faire varier les effets d’entrée et de sortie de la souris. Ce que j'ai fait avec cet exemple est de réduire le temps nécessaire à l'animation lorsque l'utilisateur quitte le survol.
Démo: Cliquez ici pour voir cet exemple en action.
Faire varier les effets
En poussant cette idée encore plus loin, vous ne pouvez pas seulement modifier le temps, vous pouvez également modifier la propriété et la fonction de minutage. Voici un exemple:
Ici, je me suis retrouvé avec la même animation que celle utilisée pour l'événement de survol, mais lorsque l'utilisateur quitte le survol, la seule chose qui s'anime en retour est le rayon de la frontière.
Démo: Cliquez ici pour voir cet exemple en action.
Conclusion
En résumé, vous pouvez aborder les transitions CSS de trois façons fondamentales. La première consiste à associer la transition à un sélecteur sans survol. Cela rend les transitions de survol avant et arrière identiques (uniquement en sens inverse). La deuxième méthode consiste à associer la transition à un sélecteur de survol. Cela crée un survol en transition mais élimine la transition en survol.
Enfin, la troisième méthode consiste à relier les transitions aux deux sélecteurs.Dans ce cas, la transition sans survol aura une incidence sur la planer événement et la transition en vol stationnaire affectera la planer dans un événement. C'est la technique que vous voudrez utiliser si vous voulez avoir le plus de contrôle sur les événements séparés.
Laissez un commentaire ci-dessous et dites-nous ce que vous pensez de tout cela. Avez-vous déjà remarqué que des événements de survol / décollage séparés étaient possibles? Avez-vous utilisé cela d'une manière ou d'une autre?