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

Создание стилей анимации является одной частью процесса анимации, а запуск анимации из шаблона - другой. Как и в ECMAScript, мы объявляем функцию, но мы должны запустить ее, чтобы увидеть эффект.

Предопределенные состояния и сопоставление с подстановочными знаками

В Angular переходные состояния могут быть определены явно с помощью функции state () или с использованием предопределенных * (подстановочных знаков) и пустых состояний.

Состояние подстановочного знака

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

Вот еще один пример кода с использованием подстановочного состояния вместе с нашим предыдущим примером с использованием открытого и закрытого состояний. Вместо того, чтобы определять каждую пару переходов между состояниями, мы теперь говорим, что любой переход в закрытое состояние занимает 1 секунду, а любой переход в открытое состояние занимает 0,5 секунды.

Использование подстановочных знаков со стилями

Используйте подстановочный знак * со стилем, чтобы указать анимации использовать текущее значение стиля, и анимируйте его. Подстановочный знак - это запасное значение, которое используется, если анимированное состояние не объявлено в триггере.

transition ('* => open', [
  animate ('1s',
    style ({ opacity: '*' }),
  ),
]),

Состояние подстановочного знака

Звездочка * или подстановочный знак соответствуют любому состоянию анимации. Это полезно для определения переходов, которые применяются независимо от начального или конечного состояния HTML-элемента. Или мы можем определить анимацию, чтобы сказать, что любой переход в закрытое состояние занимает 1 секунду, а любой переход в открытое состояние занимает 0,5 секунды.

Код TypeScript:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule
  ],
  animations: [
  trigger('openClose', [
    // ...
    state('open', style({
      height: '200px',
      opacity: 1,
      backgroundColor: 'yellow'
    })),
    state('closed', style({
      height: '100px',
      opacity: 0.5,
      backgroundColor: 'green'
    })),
    transition('* => closed', [
      animate('1s')
    ]),
    transition('* => open', [
      animate('0.5s')
    ]),
  ]),
],
})
export class AnimatedModule { }

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

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

Пустое состояние

Вы можете использовать состояние void для настройки переходов для элемента, который входит или покидает страницу.

Объединение подстановочных и пустых состояний

Вы можете комбинировать подстановочные и пустые состояния при переходе для запуска анимации, которая входит и покидает страницу:

• Переход * => void применяется, когда элемент покидает представление, независимо от того, в каком состоянии он находился до своего выхода.
• Переход void => * применяется, когда элемент входит в представление, независимо от того, какое состояние он принимает при входе.
• Состояние подстановочного знака * соответствует любому состоянию, включая void.

Анимация входа и выхода из вида

Мы продемонстрировали бы, как анимировать элементы, входящие или выходящие из страницы.

Демонстрация, которая будет реализована, имеет следующие характеристики:

• Когда вы добавляете ученика в список учеников, он появляется на странице слева.
• Когда вы удаляете ученика из списка, он вылетает вправо.

Код TypeScript:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule
  ],
  animations: [
  trigger('flyInOut', [
    state('in', style({ transform: 'translateX(0)' })),
    transition('void => *', [
      style({ transform: 'translateX(-100%)' }),
      animate(100)
    ]),
    transition('* => void', [
      animate(100, style({ transform: 'translateX(100%)' }))
    ])
  ])
]
})
export class AnimatedModule { }

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

См. Pen student-list-enter-exit.ts от w3resource ( @ w3resource ) в CodePen .

: введите и: оставьте псевдонимы

: enter и: left - псевдонимы для void => * и * => void переходов. Эти псевдонимы используются несколькими анимационными функциями.

transition ( ':enter', [ ... ] );  // alias for void => *
transition ( ':leave', [ ... ] );  // alias for * => void

Использование * ngIf и * ngFor с: enter и: оставить

Переход: enter выполняется, когда на странице размещаются какие-либо представления * ngIf или * ngFor, и: оставлять запускается, когда эти представления удаляются со страницы.

В этом примере у нас есть специальный триггер для анимации входа и выхода, который называется myInsertRemoveTrigger. Шаблон HTML содержит следующий код.

<div @myInsertRemoveTrigger *ngIf="isShown" class="insert-remove-container">
  <p>The box is inserted</p>
</div>

В файле компонента переход: enter устанавливает начальную непрозрачность 0, а затем анимирует ее, чтобы изменить эту непрозрачность на 1 при вставке элемента в представление.

Предыдущая: HttpClient
Далее: Введение в угловую анимацию