@angular/animations

Trigger and state-based animations

This feature allows defining animations based on triggers and states. The example shows an animation trigger named 'openClose' with two states, 'open' and 'closed', and transitions between these states with different styles and durations.

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

@Component({
  selector: 'my-component',
  templateUrl: 'my-component.html',
  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')
      ]),
    ]),
  ]
})
export class MyComponent {
  isOpen = true;

  toggle() {
    this.isOpen = !this.isOpen;
  }
}

Animation callbacks

Animation callbacks allow you to listen for when an animation starts and ends. In this example, the 'onAnimationEvent' method is called with the animation event, which includes the phase name ('start' or 'done').

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

@Component({
  selector: 'my-component',
  templateUrl: 'my-component.html',
  animations: [
    trigger('openClose', [
      transition('open => closed', [
        animate('1s', style({ opacity: 0 }))
      ]),
    ]),
  ]
})
export class MyComponent {
  animationStatus = 'ready';

  onAnimationEvent(event: AnimationEvent) {
    this.animationStatus = event.phaseName;
  }
}

Reusable animations

Reusable animations allow you to define an animation once and reuse it in different components or triggers. The example defines a 'fadeInAnimation' and uses it in a component with the 'fadeIn' trigger.

import { animation, useAnimation, transition, trigger } from '@angular/animations';

export const fadeInAnimation = animation([ animate('100ms ease-in', style({ opacity: 1 })) ]);

@Component({
  selector: 'my-component',
  templateUrl: 'my-component.html',
  animations: [
    trigger('fadeIn', [
      transition(':enter', useAnimation(fadeInAnimation))
    ])
  ]
})
export class MyComponent {}