Я уже некоторое время использую один и тот же шаблон анимации в своих проектах для анимации элементов на экране. В простейшей форме у вас будет элемент с нулевой непрозрачностью, а затем измените стиль на непрозрачность, равную единице, с CSS-переходом, равным секунде. Мы можем опираться на это, добавляя другие свойства, которые меняют переход, изменяя продолжительность, добавляя задержку или устанавливая пользовательское замедление. — это компонент React многократного использования, который я добавил, когда хочу быстро добавить в свои проекты некоторые анимационные эффекты. Простой служебный компонент, сочетающий CSS Animation с классами Tailwind для создания плавной, привлекательной анимации с минимальными усилиями. <AnimateIn/> Давайте посмотрим, как он используется. После импорта компонента определите состояния и с помощью классов Tailwind. Оберните целевой элемент в , чтобы увидеть, как анимация оживает. from to <AnimateIn/> import AnimateIn from '../animation/AnimateIn'; <AnimateIn from="opacity-0 scale-90" to="opacity-100 scale-100" duration={500} > <YourComponent /> </AnimateIn> Вот немного более сложный пример, в котором используется больше свойств для анимации заголовка и подзаголовка. import AnimateIn from '../animation/AnimateIn'; <header> <AnimateIn as="h1" from="opacity-0 translate-y-32" to="opacity-100 translate-y-0" delay={500} duration={300} className="text-4xl" style={{transitionTimingFunction:"cubic-bezier(0.25, 0.4, 0.55, 1.4)"}} > My Big Headline </AnimateIn> <AnimateIn as="h2" from="opacity-0 scale-0" to="opacity-100 scale-100" delay={800} duration={500} className="text-lg" > This is a subtitle below the headline </AnimateIn> </header> В примере с заголовком используется для создания эффекта скольжения в сочетании с плавным появлением. Вот как каждое свойство влияет на анимацию: <AnimateIn/> свойство: Установив , мы сообщаем AnimateIn отображать анимацию как элемент . as as="h1" <h1> Свойства и : свойство делает заголовок заэкранным ( , перемещая его на 32 единицы вниз) и невидимым ( ). Свойство затем переводит заголовок в конечное положение (обратно к ) и делает его полностью видимым ( ). from to from translate-y-32 opacity-0 to translate-y-0 opacity-100 Свойство : анимация начинается немедленно, без задержки и длится 300 мс. duration Свойство : применяет служебный класс Tailwind для установки размера шрифта, благодаря чему заголовок заметно выделяется. className className="text-4xl" Свойство : Пользовательский ( ) добавляет анимацию уникальной легкости, придавая ей эффект отскока. style transitionTimingFunction cubic-bezier(0.25, 0.4, 0.55, 1.4) В подзаголовке используется другой набор анимаций, дополняющих заголовок, создавая целостный визуальный поток. свойство: Здесь отображает компонент как элемент , подходящий для субтитров. as as="h2" <h2> и свойств: субтитр сначала уменьшается до нуля ( ) и становится невидимым ( ), затем масштабируется до своего естественного размера ( ) и становится полностью видимым ( ). Этот эффект масштабирования в сочетании с плавным появлением добавляет анимации глубину. from to scale-0 opacity-0 scale-100 opacity-100 Свойства и : субтитры также начинаются после задержки в 800 мс, то есть после полной анимации заголовка. Такой поэтапный подход гарантирует, что каждый элемент получит свое внимание. delay duration Свойство : задает размер шрифта субтитров, делая его меньше заголовка, но все равно значимым. className className="text-lg" Чтобы лучше понять, что происходит, давайте посмотрим исходный код : <AnimateIn/> на Github использует перехватчик для инициализации состояния анимации с помощью свойства , которое должно быть одним или несколькими служебными классами Tailwind, устанавливая основу для начальной точки анимации до того, как начнется какая-либо анимация. <AnimateIn/> useState from Первый хук в компоненте предназначен для соблюдения предпочтений пользователя по уменьшению движения. При прослушивании медиа-запроса поведение анимации зависит от системных настроек пользователя. Если предпочтение отдается ограниченному движению, анимация полностью пропускается, а состояние анимации напрямую устанавливается в свойство , что обеспечивает доступность интерфейса. useEffect (prefers-reduced-motion: reduce) to Второй хук — это место, где находится логика анимации. Если пользователь не указал предпочтение уменьшенному движению, компонент устанавливает таймер, который меняет состояние анимации начального значения на конечное после указанной задержки. Этот переход создает визуальный эффект анимации. useEffect from to Функция очистки этого перехватчика (оператор return) очищает таймер, предотвращая возможные утечки памяти, например, если компонент размонтируется до завершения анимации. Вызов функции — это механизм рендеринга компонента. Он динамически создает элемент HTML на основе , что позволяет использовать компонент в различных элементах HTML. создается с использованием функции , , которая объединяет служебные классы Tailwind, пользовательское передаваемое в качестве реквизита, и текущее состояние анимации. Это динамическое назначение класса — это то, что применяет к элементу нужные стили и переходы. React.createElement as className cn популяризированной shadcn className Кроме того, существует атрибут , который можно передать для непосредственного задания свойств стиля в контейнере анимации. устанавливается на основе свойства , но оно автоматически переключается на , если пользователь предпочитает уменьшенное движение, эффективно отключая анимацию, сохраняя при этом функциональность компонента. style transitionDuration duration 0ms Если вы хотите использовать в своем проекте и он уже использует , то все необходимое у вас уже есть, просто и добавьте его в свои компоненты. <AnimateIn/> shadcn скачайте AnimateIn.tsx В противном случае вам понадобится , а также для объединения классов попутного ветра. установить Tailwind mxcn — полезную утилиту Как и shadcn, <AnimateIn/> представляет собой компонент многократного использования, который вы можете копировать и вставлять в свои приложения и настраивать в соответствии со своими потребностями. Код ваш. Кроме того, я собрал красивую демонстрационную страницу для экспериментов с созданием различных анимаций с помощью на . <AnimateIn/> animate-in.vercel.app Также опубликовано здесь
