Volant long

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'infiltron apparaîtrait après un volant de trois secondes.

Mon approche initiale impliquait la gestion de l'état JavaScript:

1. Une variable d'état pour suivre la visibilité sur l'info-bulle (Visible / Hidden). Cet état mettrait à jour une classe sur l'élément HTML pertinent.
2. Les auditeurs d'événements ( mouseenter , mouseleave ) pour gérer les transitions de l'État.
3. Un retard de trois secondes avant de définir l'état sur visible sur mouseenter .
4. L'office resterait caché ( mouseleave ).

Il s'agissait d'un projet React, donc l'utilisation de JavaScript State était naturel. Cependant, rétrospectivement, il s'est avéré inutilement complexe. Les événements mouseenter et mouseleave se sentaient légèrement peu fiables, et toute la fonctionnalité aurait pu être mise en œuvre de manière plus concise et efficace avec CSS seul.

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 simple propriété CSS transition-delay :

 .chose {
  transition: 0,2 s;
}
.
  TRANSITION DU TRANSITION: 3S; / * retarder l'animation de survol uniquement sur, pas off * /
}

Cet élégant one-liner réalise parfaitement l'effet de longueur long souhaitée.

Cette approche, cependant, ne traite pas entièrement l'accessibilité à l'écran tactile. Alors que les lecteurs d'écran gèrent le texte accessible et les utilisateurs de bureau bénéficient des info-bulleurs, les utilisateurs de contact uniquement peuvent manquer les étiquettes d'icônes. Mon projet a ciblé les grands écrans, en supposant la disponibilité du curseur, mais l'accessibilité tactile reste une préoccupation. Si l'élément est un lien, le :hover 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 Touch reste une option viable.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!