Transition between states in Angular - Performance & Optimization

Performance: Transition between states

MEDIUM IMPACT

This affects how smoothly the UI updates when components change state, impacting user interaction responsiveness and visual stability.

Animating UI changes between component states

Angular

import { Component } from '@angular/core';
import { trigger, state, style, animate, transition } from '@angular/animations';
@Component({
  selector: 'app-good-transition',
  template: `<div [@fadeInOut]="isVisible ? 'visible' : 'hidden'" (click)="toggle()">Content</div>`,
  animations: [
    trigger('fadeInOut', [
      state('visible', style({ opacity: 1 })),
      state('hidden', style({ opacity: 0 })),
      transition('visible <=> hidden', animate('300ms ease-in-out'))
    ])
  ]
})
export class GoodTransitionComponent {
  isVisible = true;
  toggle() {
    this.isVisible = !this.isVisible;
  }
}

Angular animations run on the compositor thread, reducing layout recalculations and providing smooth transitions.

📈 Performance GainSingle composite layer update per transition, reducing reflows and improving INP and CLS.

Animating UI changes between component states

Angular

import { Component } from '@angular/core';
@Component({
  selector: 'app-bad-transition',
  template: `<div [style.opacity]="isVisible ? '1' : '0'" (click)="toggle()">Content</div>`,
})
export class BadTransitionComponent {
  isVisible = true;
  toggle() {
    this.isVisible = !this.isVisible;
  }
}

Directly changing styles without Angular animations causes abrupt changes and triggers multiple layout recalculations.

📉 Performance CostTriggers multiple reflows and repaints on each toggle, causing janky UI and higher INP.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Direct style changes on state toggle	Minimal DOM ops	Multiple reflows per toggle	High paint cost due to layout changes	[X] Bad
Angular animations with opacity transitions	Minimal DOM ops	No reflows, only composite	Low paint cost, GPU accelerated	[OK] Good

Rendering Pipeline

State transitions using Angular animations flow through style calculation, layout, paint, and composite stages. Proper animations minimize layout and paint work by using opacity and transform properties.

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckLayout and Paint stages are most expensive if transitions trigger reflows.

Core Web Vital Affected

INP, CLS

This affects how smoothly the UI updates when components change state, impacting user interaction responsiveness and visual stability.

Optimization Tips

1Animate opacity or transform properties to avoid layout recalculations.

2Use Angular's animation API to leverage GPU compositing.

3Avoid direct style changes that trigger reflows during state transitions.

Performance Quiz - 3 Questions

Which CSS property is best to animate for smooth Angular state transitions?

A top

B opacity

C width

D margin

DevTools: Performance

How to check: Record a performance profile while toggling the state. Look for layout and paint events in the flame chart.

What to look for: Fewer layout and paint events and more composite-only updates indicate better performance.