Animation transitions and triggers

Creating the animation styles is one part of the animation process, triggering the animation from the template is another. Just like in ECMAScript we declare a function but we have to trigger it to see the effect.

Predefined states and wildcard matching

In Angular, transition states can be defined explicitly through the state() function, or using the predefined * (wildcard) and void states.

Wildcard state

An asterisk * or wildcard matches any animation state. This is useful for defining transitions that apply regardless of the HTML element's start or end state.

Here's another code sample using the wildcard state together with our previous example using the open and closed states. Instead of defining each state-to-state transition pair, we're now saying that any transition to closed takes 1 second, and any transition to open takes 0.5 seconds.

Using wildcards with styles

Use the wildcard * with a style to tell the animation to use whatever the current style value is, and animate with that. Wildcard is a fallback value that's used if the state being animated isn't declared within the trigger.

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

Wildcard state

An asterisk * or wildcard matches any animation state. This is useful for defining transitions that apply regardless of the HTML element's start or end state. Or we can define the animation to say that any transition to closed takes 1 second, and any transition to open takes 0.5 seconds.

TypeScript Code:

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 { }

Live Demo:

It is just a code snippet explaining a particular concept and may not have any output

See the Pen open-close.component.ts by w3resource (@w3resource) on CodePen.

Void state

You can use the void state to configure transitions for an element that is entering or leaving a page.

Combining wildcard and void states

You can combine wildcard and void states in a transition to trigger animations that enter and leave the page:

• A transition of * => void applies when the element leaves a view, regardless of what state it was in before it left.
• A transition of void => * applies when the element enters a view, regardless of what state it assumes when entering.
• The wildcard state * matches to any state, including void.

Animating entering and leaving a view

We would demonstrate how to animate elements entering or leaving a page.

The demonstration to be implemented has the following characteristics:

• When you add a student to the list of students, it appears to fly onto the page from the left.
• When you remove a student from the list, it appears to fly out to the right.

TypeScript Code:

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 { }

Live Demo:

It is just a code snippet explaining a particular concept and may not have any output

See the Pen student-list-enter-leave.ts by w3resource (@w3resource) on CodePen.

:enter and :leave aliases

:enter and :leave are aliases for the void => * and * => void transitions. These aliases are used by several animation functions.

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

Use of *ngIf and *ngFor with :enter and :leave

The :enter transition runs when any *ngIf or *ngFor views are placed on the page, and :leave runs when those views are removed from the page.

In this example, we have a special trigger for the enter and leave animation called myInsertRemoveTrigger. The HTML template contains the following code.

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

In the component file, the :enter transition sets an initial opacity of 0, and then animates it to change that opacity to 1 as the element is inserted into the view.

Previous: HttpClient
Next: Introduction to Angular animations