Auf den Fragenlistenseiten meines Produkts Front Prep zeige ich Firmenlogos neben Interviewfragen an. Wenn Sie über ein Logo fahren, zeigt ein Tooltip den Firmennamen an. Ich hatte die Tooltip-Verzögerung auf 0 gesetzt, sodass Tooltips sofort erschienen, wenn ich den Cursor über die Seite bewegte.
Um dies zu beheben, fügte ich eine Übergangsverzögerung von 200 ms hinzu, aber dies schuf ein neues Problem: Das Bewegen zwischen mehreren Logos bedeutete, jedes Mal die gleiche 200-ms-Verzögerung zu warten, was sich träge anfühlte. Dieser Beitrag handelt von einem kleinen Interaktionsmuster, das in Browser-Symbolleisten und Websites zu finden ist. Meine Lösung besteht aus drei Teilen: Wenn Sie über ein Logo fahren, wartet der Tooltip 200 ms, bevor er sich öffnet.
Wenn ein Tooltip geschlossen wird, startet ein 300-ms-Timer, den ich das Warm-Fenster nenne. Wenn Sie während dieses Timers über ein anderes Logo fahren, öffnet sich der Tooltip sofort und überspringt die Verzögerung. Wenn der Timer abläuft, wird die Seite kalt und die 200-ms-Wartezeit kehrt zurück.
In Front Prep werden meine Tooltips mit Radix und Motion erstellt. Der Code verwendet eine useContext-Variable, um den isWarm-Zustand zwischen Komponenten zu verfolgen. Beim Überfahren prüft die Komponente, ob die Seite warm ist; wenn ja, öffnet sich der Tooltip sofort; andernfalls startet sie einen 200-ms-Timer.
Die show-Funktion kopiert den warmen Zustand in ein Instant-Flag, das CSS verwendet, um die Eingangsanimation über ein Datenattribut zu überspringen. Dieses Muster verbessert die Benutzererfahrung, indem es sowohl sofortige Popups als auch träge Verzögerungen vermeidet. Es ist ein einfacher Ansatz, den Sie in Ihrer eigenen Codebasis implementieren können.
Wichtige Unternehmen: Front Prep.
Quelle: Hacker News · Zusammengefasst von HeadlinesBriefing