Récemment, j'ai rencontré une surveillance CSS plutôt embarrassante. Je développais un site Web avec une barre latérale étroite contenant des icônes. Manquant d'espace pour le texte descriptif, la conception appelait à des infractions accessibles, mais initialement cachées, déclenchées par un volant prolongé. L'info-bulle apparaîtrait après un volant de trois secondes.

Mon approche initiale impliquait JavaScript State Management:

1. une variable d'état pour suivre la visibilité de l'info-bulle (visible / caché). Cet état mettrait à jour une classe sur l'élément HTML pertinent.
2. écouteurs d'événements ( MouseEnter , Mouseleave ) pour gérer les transitions d'état.
3. un délai de trois secondes avant de définir l'état sur visible sur MouseEnter .
4. L'infiltron resterait caché ( Mouseleave ).

C'était un projet React, donc en utilisant JavaScript State était naturel. Cependant, rétrospectivement, il s'est avéré inutilement complexe. Les événements de MouseEave se sentaient légèrement peu fiables. La réalisation embarrassante: je met à profit inutilement une bibliothèque JavaScript lorsqu'une solution CSS était facilement disponible. J'ai conservé l'interface utilisateur React mais j'ai supprimé la gestion de l'état JavaScript. La solution impliquait une propriété simple CSS

:

.chose { transition: 0,2 s; } . TRANSITION DU TRANSITION: 3S; / * retarder l'animation de survol uniquement sur, pas off * / } Cet élégant one-liner atteint parfaitement l'effet long souhaité.

.thing {
  transition: 0.2s;
}
.thing:hover {
  transition-delay: 3s; /* delay hover animation only ON, not OFF */
}

peut s'activer sur le robinet initial. Si le lien mène à une page avec un titre clair, cela pourrait fournir un contexte suffisant. Sinon, la gestion des événements JavaScript pour les événements tactiles reste une option viable.