На страницах списка вопросов моего продукта Front Prep я отображаю логотипы компаний рядом с вопросами на собеседовании. При наведении на логотип появляется всплывающая подсказка с названием компании. Я установил задержку подсказки на 0, поэтому подсказки появлялись мгновенно при перемещении курсора по странице. Чтобы исправить это, я добавил задержку перехода в 200 мс, но это создало новую проблему: перемещение между несколькими логотипами означало ожидание той же задержки в 200 мс каждый раз, что казалось медленным. Этот пост о небольшом паттерне взаимодействия, встречающемся в панелях инструментов браузера и на веб-сайтах. Моё решение делится на три части: при наведении на логотип подсказка ждёт 200 мс перед открытием. Когда подсказка закрывается, запускается таймер на 300 мс, который я называю «тёплым окном». Если вы наводите на другой логотип, пока этот таймер активен, подсказка открывается мгновенно, пропуская задержку. Когда таймер истекает, страница становится «холодной», и задержка в 200 мс возвращается. В Front Prep мои подсказки созданы с помощью Radix и Motion. Код использует переменную контекста для отслеживания состояния isWarm между компонентами. При наведении компонент проверяет, тёплая ли страница; если да, подсказка открывается мгновенно; в противном случае запускается таймер на 200 мс. Функция show копирует тёплое состояние во флаг instant, который CSS использует для пропуска анимации входа через атрибут данных. Этот паттерн улучшает пользовательский опыт, избегая как мгновенных всплывающих окон, так и медленных задержек. Это простой подход, который вы можете реализовать в своей собственной кодовой базе. Ключевые сущности: Компании: Front Prep.
Источник: Hacker News · Сводку подготовил HeadlinesBriefing