Введение в угловую анимацию

Анимация создает иллюзию движения: элементы HTML со временем меняют стиль. Как правило, анимация включает в себя несколько стилевых преобразований с течением времени. Элемент HTML может перемещаться, изменять цвет, увеличиваться или уменьшаться, исчезать или соскальзывать со страницы. Эти изменения могут происходить одновременно или последовательно. Система анимации Angular построена на функциональности CSS, что означает, что вы можете анимировать любое свойство, которое браузер считает анимируемым.

Начиная

Основными модулями Angular для анимации являются @ angular / animations и @ angular / platform-browser. Когда вы создаете новый проект с помощью CLI, эти зависимости автоматически добавляются в ваш проект.

Чтобы начать добавление Angular-анимаций в ваш проект, импортируйте модули для анимации вместе со стандартной функциональностью Angular.

Шаг 1: Включить модуль анимации

Импортируйте BrowserAnimationsModule, который вводит возможности анимации в модуль корневого приложения Angular.

Код TypeScript:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule
  ],
  declarations: [ ],
  bootstrap: [ ]
})
export class AppModule { }

Демонстрация в реальном времени:

См. Pen animation_app.module.ts от w3resource ( @ w3resource ) в CodePen .

Шаг 2: Импорт функций анимации в файлы компонентов

Если вы планируете использовать определенные функции анимации в файлах компонентов, импортируйте эти функции из @ angular / animations.

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

Шаг 3. Добавление свойства метаданных анимации

В файле компонента добавьте свойство метаданных с именем animations: в декораторе @Component (). Вы помещаете триггер, который определяет анимацию, в свойство метаданных анимации.

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  animations: [
    // animation triggers go here
  ]
})

Анимация простого перехода

Давайте оживим простой переход, который изменяет один элемент HTML из одного состояния в другое. Например, вы можете указать, что кнопка отображает либо Открыто, либо Закрыто в зависимости от последнего действия пользователя. Когда кнопка находится в открытом состоянии, она видна и желтая. Когда это закрытое состояние, оно прозрачное и зеленое.

Состояние и стили анимации

Как правило, мы используем функцию state () Angular для определения различных состояний, вызываемых в конце каждого перехода. Эта функция принимает два аргумента: уникальное имя, такое как open или closed, и функция style ().

Используйте функцию style () для определения набора стилей, связанных с данным именем состояния.

Вот как функция Angular state () работает с функцией style () для установки атрибутов стиля CSS. Мы устанавливаем несколько атрибутов стиля одновременно для государства. В открытом состоянии кнопка имеет высоту 200 пикселей, непрозрачность 1 и цвет фона желтый.

// ...
state('open', style({
  height: '200px',
  opacity: 1,
  backgroundColor: 'yellow'
})),

В закрытом состоянии, как показано ниже, кнопка имеет высоту 100 пикселей, непрозрачность 0,5 и зеленый цвет фона.

Переходы и сроки

В Angular вы можете установить несколько стилей без анимации. Однако без дальнейшей доработки кнопка мгновенно преобразуется без выцветания, усадки или другого видимого индикатора изменения.

Чтобы сделать изменение менее резким, нам нужно определить анимационный переход, чтобы указать изменения, которые происходят между одним состоянием и другим в течение определенного периода времени. Функция transition () принимает два аргумента: первый аргумент принимает выражение, которое определяет направление между двумя состояниями перехода, а второй аргумент принимает функцию animate (). Пример, который мы могли бы получить для закрытого состояния:

transition('open => closed', [
  animate('1s')
]),

А для открытого состояния мы могли бы иметь:

transition('open => closed', [
  animate('1s')
]),

Запуск анимации

Анимация требует триггера, чтобы он знал, когда начать. Функция trigger () собирает состояния и переходы и дает анимации имя, чтобы вы могли присоединить ее к инициирующему элементу в шаблоне HTML.

Функция trigger () описывает имя свойства для отслеживания изменений. Когда происходит изменение, триггер инициирует действия, включенные в его определение. Эти действия могут быть переходами или другими функциями.

Определение анимации и присоединение их к шаблону HTML

Анимации определяются в метаданных компонента, который управляет элементом HTML для анимации. Поместите код, который определяет ваши анимации, в свойство animations: в декораторе @Component ().

Код TypeScript:

@Component({
  selector: 'app-open-close',
  animations: [
    trigger('openClose', [
      // ...
      state('open', style({
        height: '200px',
        opacity: 1,
        backgroundColor: 'yellow'
      })),
      state('closed', style({
        height: '100px',
        opacity: 0.5,
        backgroundColor: 'green'
      })),
      transition('open => closed', [
        animate('1s')
      ]),
      transition('closed => open', [
        animate('0.5s')
      ]),
    ]),
  ],
  templateUrl: 'open-close.component.html',
  styleUrls: ['open-close.component.css']
})
export class OpenCloseComponent {
  isOpen = true;
  toggle() {
    this.isOpen = !this.isOpen;
  }
}

Демонстрация в реальном времени:

См. Pen open-close.component.ts от w3resource ( @ w3resource ) в CodePen .

Когда вы определили анимационный триггер для компонента, вы можете присоединить его к элементу в шаблоне этого компонента, заключив имя триггера в квадратные скобки и поставив перед ним символ @. Затем вы можете привязать триггер к выражению шаблона, используя стандартный синтаксис привязки свойства Angular.

<div [@openClose]="isOpen ? 'open' : 'closed'" class="open-close-container">
  <p>The box is now {{ isOpen ? 'Open' : 'Closed' }}!</p>
</div>

Предыдущая: Анимация переходов и триггеров
Далее: сложные последовательности