trigger

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

[@triggerName]="expression"

Привязки триггеров анимации преобразуют все значения в строки, а затем сопоставляют предыдущие и текущие значения со всеми связанными переходами. Логические значения можно указать как 1 или true и 0 или false.

Пример использования

В следующем примере создается ссылка на триггер анимации на основе предоставленного значения имени. Ожидается, что предоставленное значение анимации будет массивом объявлений состояний и переходов.

@Component({
  selector: "my-component",
  templateUrl: "my-component-tpl.html",
  animations: [
    trigger("myAnimationTrigger", [
      state(...),
      state(...),
      transition(...),
      transition(...)
    ])
  ]
})
class MyComponent {
  myStatusExp = "something";
}

Шаблон, связанный с этим компонентом, использует определенный триггер, привязывая его к элементу в коде шаблона.

<!-- somewhere inside of my-component-tpl.html -->
<div [@myAnimationTrigger]="myStatusExp">...</div>

Использование встроенной функции

Метод анимации transition также поддерживает чтение встроенной функции, которая определяет, следует ли запускать связанную с ней анимацию.

// this method is run each time the `myAnimationTrigger` trigger value changes.
function myInlineMatcherFn(fromState: string, toState: string, element: any, params: {[key:
string]: any}): boolean {
  // notice that `element` and `params` are also available here
  return toState == 'yes-please-animate';
}

@Component({
  selector: 'my-component',
  templateUrl: 'my-component-tpl.html',
  animations: [
    trigger('myAnimationTrigger', [
      transition(myInlineMatcherFn, [
        // the animation sequence code
      ]),
    ])
  ]
})
class MyComponent {
  myStatusExp = "yes-please-animate";
}

Отключение анимации

Если для специальной привязки управления анимацией @.disabled установлено значение true, она предотвращает воспроизведение всех анимаций. Разместите привязку @.disabled на элементе, чтобы отключить анимацию самого элемента, а также любых внутренних триггеров анимации.

В следующем примере показано, как использовать эту возможность:

@Component({
  selector: 'my-component',
  template: `
    <div [@.disabled]="isDisabled">
      <div [@childAnimation]="exp"></div>
    </div>
  `,
  animations: [
    trigger("childAnimation", [
      // ...
    ])
  ]
})
class MyComponent {
  isDisabled = true;
  exp = '...';
}

Если @.disabled имеет значение true, это препятствует анимации триггера @childAnimation, а также любых внутренних анимаций.

Отключение анимации во всем приложении

Если для области шаблона отключена анимация, анимация отключается и у всех внутренних компонентов. Это означает, что можно отключить всю анимацию приложения, установив привязку к хосту @.disabled на самом верхнем компоненте Angular.

import {Component, HostBinding} from '@angular/core';

@Component({
  selector: 'app-component',
  templateUrl: 'app.component.html',
})
class AppComponent {
  @HostBinding('@.disabled')
  public animationsDisabled = true;
}

Переопределение отключения внутренних анимаций

Даже если внутренние анимации отключены, родительская анимация может query() внутренние элементы в отключенных областях шаблона и при необходимости по-прежнему анимировать их. То же самое относится к ситуации, когда родительский элемент запрашивает вложенную анимацию, а затем запускает ее с помощью animateChild().

Определение отключенной анимации

Если анимация отключена в области DOM (или во всем приложении), обратные вызовы триггеров анимации все равно выполняются, но длятся ноль секунд. При вызове обратного вызова передается экземпляр AnimationEvent. Если анимация отключена, флаг .disabled в событии имеет значение true.