Часть 5: Переход
Чтобы анимировать открытие/закрытие всплывающей панели, нам нужно добавить компонент «Переход».
Во-первых, мы импортируем Transiton из безголового пользовательского интерфейса.
import { Popover, Transition } from '@headlessui/react'
Затем мы используем ‹Transiton›, чтобы обернуть ‹Popover.Panel›. Например, мы увеличиваем длительность при вводе, скажем, 1000 мс, увеличиваем масштаб в начале, который равен 125.
<Transition
enter="transition duration-1000 ease-out"
enterFrom="transform scale-125 opacity-0"
enterTo="transform scale-100 opacity-100"
leave="transition duration-75 ease-out"
leaveFrom="transform scale-100 opacity-100"
leaveTo="transform scale-95 opacity-0"
>
<Popover.Panel className="absolute z-10 mt-3">
<div className="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5">
<div className="relative grid gap-8 bg-white p-7 ">
<Popover.Button as={MyLink} href="/insights">
Insights
</Popover.Button>
<a href="/analytics">Analytics</a>
<a href="/engagement">Engagement</a>
<a href="/security">Security</a>
<a href="/integrations">Integrations</a>
</div>
</div>
</Popover.Panel>
</Transition>
Если вам понравилась эта история, вам также может понравиться подписка на Medium. Это всего 5 долларов в месяц (цена чашки кофе!), но это даст вам неограниченный доступ к историям, поддерживая ваших любимых писателей. Если вы зарегистрируетесь по этой ссылке, я получу небольшую комиссию. Спасибо!
Подписывайтесь на нас: YouTube, Medium, Udemy, Linkedin, Twitter, Instagram, Gumroad, Quora, Telegram.
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord. Заинтересованы в Взлом роста? Ознакомьтесь с разделом Схема.
