Переходы и синхронизация
Анимируйте переходы между состояниями
«Переходы и синхронизация» — бесплатный урок Angular Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.
Анимация переходов между состояниями
Состояния описывают, где находится элемент в покое, а переходы описывают, как он перемещается между ними. Функция transition связывает изменение состояния с анимацией.
Функция transition
transition принимает выражение изменения состояния и один или несколько шагов анимации.
transition('closed => open', animate('300ms'))Операторы направления
Используйте => для одного направления и <=> для обоих направлений.
transition('open <=> closed', animate('250ms ease-in-out'))Функция animate
animate задаёт параметры времени: длительность, необязательную задержку и функцию плавности. Формат строки: "duration delay easing".
animate('500ms 100ms ease-out')Единицы длительности
Для длительности можно использовать ms или s. Число без единицы измерения интерпретируется как миллисекунды.
animate('0.4s')
animate('400ms')
animate(400)Функции плавности
Функция плавности управляет ускорением: linear, ease, ease-in, ease-out, ease-in-out или cubic-bezier().
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)')Встроенные целевые стили
animate может принимать второй аргумент style для анимации к стилям, не связанным с именованным состоянием.
transition('* => active', [
animate('300ms', style({ transform: 'scale(1.1)' }))
])Несколько шагов
Передайте массив шагов, чтобы выполнить последовательность в рамках одного перехода.
transition('closed => open', [
style({ opacity: 0 }),
animate('300ms', style({ opacity: 1 }))
])Универсальные переходы
Используйте *, чтобы соответствовать переходам из любого состояния или в любое состояние; это удобно для универсальных эффектов появления.
transition('* => open', animate('200ms'))Начальные стили
Отдельный вызов style() перед animate() задаёт начальную точку, после чего Angular анимирует переход к стилям целевого состояния.
transition(':enter', [
style({ opacity: 0 }),
animate('400ms', style({ opacity: 1 }))
])Рекомендации по времени
Для отзывчивости делайте переходы интерфейса короткими (150–300 мс). Более длительные значения оставляйте для крупных, намеренно заметных перемещений. Подбирайте функцию плавности под желаемое ощущение.
Быстрая проверка
Проверьте, насколько хорошо Вы поняли переходы и параметры времени.
Итоги
Вы узнали, что transition связывает изменения состояний (с помощью => или <=>) с шагами animate. Строка времени имеет формат duration delay easing, а шаги style и animate можно объединять в последовательности.
Часто задаваемые вопросы
Урок «Переходы и синхронизация» бесплатный?
Да — полный текст урока «Переходы и синхронизация» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.
Чему я научусь в уроке «Переходы и синхронизация»?
Анимируйте переходы между состояниями Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Angular Academy?
Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Переходы и синхронизация»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Angular Academy?
Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Основы анимаций: trigger и state
- Переходы и синхронизация
- Анимации появления и исчезновения
- Ключевые кадры и поочерёдная анимация