Основы анимаций: trigger и state
Определяйте состояния и триггеры анимаций
«Основы анимаций: trigger и state» — бесплатный урок Angular Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.
Анимации Angular
Система анимаций Angular — это декларативный DSL, построенный на API веб-анимаций. Вы описываете состояния и переходы, а Angular управляет временем выполнения и обновлениями DOM.
Настройка
Укажите анимации в конфигурации запуска приложения, чтобы включить механизм анимаций.
bootstrapApplication(AppComponent, {
providers: [provideAnimationsAsync()]
});Триггер
trigger задаёт имя анимации и объединяет её состояния и переходы. Вы подключаете его к элементу с помощью привязки.
animations: [
trigger('openClose', [
// states and transitions
])
]Определение состояний
state связывает именованное состояние с набором стилей CSS, которыми должен обладать элемент в этом состоянии.
state('open', style({ height: '200px', opacity: 1 })),
state('closed', style({ height: '0px', opacity: 0 }))Функция style
style принимает объект свойств CSS. Используйте ключи в camelCase или заключённые в кавычки имена CSS.
style({ backgroundColor: '#1976d2', transform: 'scale(1)' })Привязка триггера
В шаблоне свяжите @triggerName с выражением, возвращающим текущее состояние.
<div [@openClose]="isOpen ? 'open' : 'closed'">
Content
</div>Полный триггер
Ниже приведён триггер с двумя состояниями и переходом между ними.
trigger('openClose', [
state('open', style({ height: '200px' })),
state('closed', style({ height: '0px' })),
transition('open <=> closed', animate('300ms ease'))
])Изменение состояния из компонента
Компонент лишь переключает логическое значение или строку, а Angular выполняет интерполяцию между стилями соответствующих состояний.
isOpen = signal(true);
toggle() { this.isOpen.update(v => !v); }Универсальное состояние
Универсальное состояние * соответствует любому состоянию и удобно для значений по умолчанию, а также для анимаций появления и исчезновения, которые будут рассмотрены далее.
state('*', style({ opacity: 1 }))Состояние void
Специальное состояние void обозначает элемент, отсутствующий в DOM, и служит основой для анимаций появления и исчезновения.
Зачем нужны декларативные анимации
Декларативные анимации выносят логику времени из компонентов, интегрируются с жизненным циклом Angular и автоматически очищают ресурсы, когда элементы покидают DOM.
Быстрая проверка
Проверьте, насколько хорошо Вы поняли основы анимаций.
Итоги
Вы узнали, что анимации Angular используют trigger, содержащий определения state (каждое связывает имя с style), который подключается в шаблоне через [@trigger]. Состояния void и * охватывают отсутствующее и любое состояние.
Часто задаваемые вопросы
Урок «Основы анимаций: trigger и state» бесплатный?
Да — полный текст урока «Основы анимаций: trigger и state» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.
Чему я научусь в уроке «Основы анимаций: trigger и state»?
Определяйте состояния и триггеры анимаций Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Angular Academy?
Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Основы анимаций: trigger и state»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Angular Academy?
Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Основы анимаций: trigger и state
- Переходы и синхронизация
- Анимации появления и исчезновения
- Ключевые кадры и поочерёдная анимация