Состояния и переходы

Angular позволяет описывать состояния компонентов и переходы между ними через декларативные правила в trigger. Это обеспечивает точный контроль над визуальными эффектами при изменении состояния объекта.

Определение состояний

Состояние описывается через функцию state, где задаются ключевые стили:

import { trigger, state, style, transition, animate } from '@angular/animations';

trigger('openClose', [
  state('open', style({
    height: '200px',
    opacity: 1,
    backgroundColor: 'yellow'
  })),
  state('closed', style({
    height: '100px',
    opacity: 0.5,
    backgroundColor: 'green'
  }))
])
  • Каждое состояние имеет уникальное имя (open, closed) и набор стилей.
  • Angular автоматически отслеживает текущее состояние и применяет соответствующие стили.

Переходы между состояниями

Переходы (transition) описывают, как меняется состояние:

transition('open => closed', [
  animate('0.5s ease-out')
]),
transition('closed => open', [
  animate('0.3s ease-in')
])
  • open => closed указывает направление изменения состояния.
  • animate('0.5s ease-out') определяет длительность и временную функцию.
  • Можно использовать символ *, чтобы обозначить любое состояние: * => open или open => *.

Группировка анимаций

Angular поддерживает параллельные анимации с помощью group, позволяя одновременно изменять несколько свойств:

transition('open => closed', [
  group([
    animate('0.5s ease-out', style({ height: '100px' })),
    animate('0.3s ease-in', style({ opacity: 0.5 }))
  ])
])
  • group запускает все анимации одновременно, но каждая может иметь свою длительность и временную функцию.
  • Это удобно для сложных визуальных эффектов, где разные свойства должны изменяться синхронно, но с разной динамикой.

Последовательные анимации

Для последовательного выполнения используется sequence:

transition('open => closed', [
  sequence([
    animate('0.3s', style({ height: '150px' })),
    animate('0.2s', style({ opacity: 0.5 }))
  ])
])
  • sequence гарантирует, что каждая анимация завершится перед началом следующей.
  • Используется для создания цепочек анимаций с контролем порядка и времени.

Анимации с условиями

Angular позволяет использовать функции animate с динамическими параметрами через useAnimation и animation:

import { animation, useAnimation } from '@angular/animations';

const fadeAnimation = animation([
  animate('{{ time }} {{ easing }}', style({ opacity: 1 }))
]);

transition('closed => open', [
  useAnimation(fadeAnimation, { params: { time: '500ms', easing: 'ease-in' } })
])
  • Динамические параметры делают анимации повторно используемыми.
  • Позволяют изменять длительность и временную функцию в зависимости от условий компонента.

Эти инструменты позволяют создавать гибкие и точные анимации, управлять визуальными переходами элементов и добиваться высокой степени интерактивности интерфейсов в Angular.

Оглавление