Transition between states in Angular

Introduction

Transitions between states help make your app feel smooth and alive by animating changes. They guide the user's eye and improve experience.

When you want to show a button changing color on hover.

When a menu opens or closes with a sliding effect.

When switching between different views or pages smoothly.

When showing or hiding content with a fade effect.

Syntax

Angular

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

@Component({
  standalone: true,
  selector: 'app-example',
  templateUrl: './example.component.html',
  animations: [
    trigger('stateName', [
      state('state1', style({ /* styles */ })),
      state('state2', style({ /* styles */ })),
      transition('state1 <=> state2', [
        animate('duration easing')
      ])
    ])
  ]
})

Use trigger to name your animation.

state defines styles for each state.

transition defines how to animate between states.

Examples

This example animates height and opacity between open and closed states over half a second.

Angular

animations: [
  trigger('openClose', [
    state('open', style({ height: '200px', opacity: 1 })),
    state('closed', style({ height: '100px', opacity: 0.5 })),
    transition('open <=> closed', [animate('0.5s ease-in-out')])
  ])
]

This example fades an element in and out by changing opacity.

Angular

animations: [
  trigger('fadeInOut', [
    state('visible', style({ opacity: 1 })),
    state('hidden', style({ opacity: 0 })),
    transition('visible <=> hidden', [animate('300ms ease')])
  ])
]

Sample Program

This Angular component shows a button and a box. Clicking the button toggles the box between two states: open and closed. The box smoothly changes height and opacity using Angular animations.

ARIA attributes help screen readers understand the toggle button and the box region.

Angular

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

@Component({
  standalone: true,
  selector: 'app-toggle-box',
  template: `
    <button (click)="toggle()" aria-pressed="{{isOpen()}}">
      Toggle Box
    </button>
    <div [@openClose]="isOpen() ? 'open' : 'closed'" class="box" role="region" aria-label="Toggleable box">
      This box changes size and opacity.
    </div>
  `,
  styles: [
    `.box { width: 200px; background-color: lightblue; margin-top: 1rem; overflow: hidden; }`
  ],
  animations: [
    trigger('openClose', [
      state('open', style({ height: '200px', opacity: 1 })),
      state('closed', style({ height: '100px', opacity: 0.5 })),
      transition('open <=> closed', [animate('0.5s ease-in-out')])
    ])
  ]
})
export class ToggleBoxComponent {
  isOpen = signal(false);

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

Important Notes

Always add ARIA roles and labels for accessibility.

Use signals or reactive state to control animation states in Angular 17+.

Test animations in different browsers to ensure smoothness.

Summary

Transitions animate changes between states to improve user experience.

Use Angular's trigger, state, and transition to define animations.

Control animation states with reactive signals and toggle them on events like clicks.