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

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

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

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

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

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

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

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

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

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

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

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

Код TypeScript:

  импортировать {NgModule} из '@ angular/core'; импортировать {BrowserModule} из '@ angular/platform-browser'; импортировать {BrowserAnimationsModule} из '@ angular/platform-browser/ анимации '; @ NgModule ({imports: [BrowserModule, BrowserAnimationsModule], анимации: [trigger (' openClose ', [//... state (' open ', style ({height:' 200px ', opacity: 1, backgroundColor)  : 'желтый'})), состояние ('закрыто', стиль ({высота: '100 пикселей', непрозрачность: 0,5, backgroundColor: 'зеленый'})), переход ('* => закрыто', [анимация ('1с  ')]), transition (' * => open ', [animate (' 0.5s ')]),]),],}) класс экспорта AnimatedModule {}  

Живая демонстрация:

Это просто фрагмент кода, объясняющий конкретную концепцию, и может не иметь вывода

См. открытое перо -close.component.ts от w3resource (@ w3res ource) на CodePen.

Состояние пустоты

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

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

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

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

Анимация входа и выхода из представления

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

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

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

Код TypeScript:

  импортировать {NgModule} из '@ angular/core'; импортировать {BrowserModule} из '@ angular/platform-browser'; импортировать {BrowserAnimationsModule} из '@ angular/platform-browser/animations'; @ NgModule ({import:  [BrowserModule, BrowserAnimationsModule], анимации: [trigger ('flyInOut', [state ('in', style ({transform: 'translateX (0)'})), transition ('void => *', [style ({  transform: 'translateX (-100%)'}), animate (100)]), transition ('* => void', [animate (100, style ({transform: 'translateX (100%)'}))]  )])]}) класс экспорта AnimatedModule {}  

Live Demo:

Это просто код фрагмент, объясняющий конкретную концепцию и не имеющий вывода

См. Pen student-list-enter-leave.ts от w3resource (@ w3resource) на CodePen.

: псевдонимы enter и: leave

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

  transition (': enter', [...]); //псевдоним для void => * transition (': leave', [...]); //псевдоним для * => void  

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

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

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

  

Поле вставлено

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

Оцените статью
nanomode.ru
Добавить комментарий