Компонент Animate в WordPress используется для добавления анимаций к элементам интерфейса. Он предоставляет простой способ анимировать компоненты, применяя различные типы анимаций, такие как скольжение, появление и другие. С помощью Animate можно сделать взаимодействие с пользователем более плавным и визуально привлекательным.
Основное использование компонента Animate
Animate используется для добавления анимаций к компонентам, оборачивая их в компонент Animate с заданным типом анимации и опциями.
Пример использования Animate
В следующем примере показано, как анимировать уведомление с использованием анимации «slide-in», где уведомление будет плавно скользить с верхней части экрана:
import { Animate, Notice } from '@wordpress/components';
const MyAnimatedNotice = () => (
<Animate type="slide-in" options={ { origin: 'top' } }>
{ ( { className } ) => (
<Notice className={ className } status="success">
<p>Анимация завершена.</p>
</Notice>
) }
</Animate>
);
Пояснение
type: Определяет тип анимации. В примере используется анимация «slide-in», при которой элемент будет плавно появляться с верхней части экрана.options: Дополнительные параметры для анимации. В этом примере указаноorigin: 'top', что означает, что анимация будет начинаться сверху.children: Это функция, которая передает объект с классами, применяемыми к элементу для анимации. Мы используемclassNameдля передачи в компонентNotice, чтобы анимация применялась к этому элементу.
Свойства (Props) компонента Animate
type
- Тип:
string - Описание: Тип анимации, который будет применен к элементу. Пример: «slide-in», «appear», «loading».
- Обязателен: Нет
options
- Тип:
object - Описание: Объект, содержащий дополнительные параметры для выбранной анимации. Например, для анимации «slide-in» можно указать направление, с которого элемент будет скользить.
- Обязателен: Нет
- По умолчанию:
{}
children
- Тип:
function - Описание: Функция, которая получает объект с параметром
className, который необходимо применить к элементу. Это дает возможность легко интегрировать анимацию в уже существующие компоненты. - Обязателен: Нет
Доступные типы анимации
appear
- Описание: Эта анимация предназначена для появления всплывающих элементов, таких как меню или модальные окна. Элемент масштабируется от 0 до своего полного размера из точки происхождения.
- Опции:
- origin: Указывает точку происхождения анимации (например, «top center», «bottom right»).
Пример использования «appear»
<Animate type="appear" options={ { origin: 'top center' } }>
{ ( { className } ) => (
<Notice className={ className } status="info">
<p>Меню появилось.</p>
</Notice>
) }
</Animate>
loading
- Описание: Эта анимация используется для индикации фоновой активности, например, при загрузке данных. Это бесконечная анимация, при которой элемент постепенно меняет свою прозрачность от 50% до 100%.
- Опции: Не имеет дополнительных параметров.
Пример использования «loading»
<Animate type="loading">
{ ( { className } ) => (
<Notice className={ className } status="warning">
<p>Загрузка...</p>
</Notice>
) }
</Animate>
slide-in
- Описание: Эта анимация используется для боковых панелей или выдвигающихся меню. Элемент будет двигаться с скрытой позиции в свою обычную позицию.
- Опции:
- origin: Указывает точку, с которой будет начинаться анимация. Например, «left» для анимации, которая появляется с левой стороны.
Пример использования «slide-in»
<Animate type="slide-in" options={ { origin: 'left' } }>
{ ( { className } ) => (
<Notice className={ className } status="success">
<p>Меню выдвинулось слева.</p>
</Notice>
) }
</Animate>
Заключение
Компонент Animate в WordPress позволяет легко добавлять анимации в интерфейсы, делая их более интерактивными и привлекательными. Он поддерживает несколько типов анимаций, таких как «appear», «loading» и «slide-in», а также предоставляет гибкие настройки через опции, такие как origin. Это позволяет легко настроить анимацию в зависимости от ваших нужд, улучшая пользовательский опыт.