В стандарте HTML давно появился
Они стандартизировали и значительно упростили работу с ними, частично избавив от необходимости использовать сторонние библиотеки. Только "умное" позиционирование тултипа/меню требует дополнительной логики.
Мы рассказывали ранее как анимировать появление диалогового окна / всплывающего меню через
Тут пример создания CSS анимации для всплывающих элементов через
#popoverapi #css
<dialog> элемент и относительно недавно Popover API для модальных окон и всплывающих меню. Они стандартизировали и значительно упростили работу с ними, частично избавив от необходимости использовать сторонние библиотеки. Только "умное" позиционирование тултипа/меню требует дополнительной логики.
Мы рассказывали ранее как анимировать появление диалогового окна / всплывающего меню через
transition.Тут пример создания CSS анимации для всплывающих элементов через
keyframes.#popoverapi #css
Frontend Masters
Animating the Dialog Element
When the <dialog> element became widely available in 2022, I was thrilled. Opening a dialog? Easy. Closing a dialog? Even easier. Nested dialogs and keyboard interactions? Built-in, for free. It’s like living in the future.
И чтобы закончить с
#popoverapi
Popover API - сайдбары и выезжающие боковые шторки можно делать тоже на нем#popoverapi
Frontendmasters
Popovers Work Pretty Nicely as Slide-Out Drawers – Frontend Masters Boost
Especially on mobile, the slide-out drawer UI/UX seems like a perfect fit for a popover, and works fine on desktop too.