Angular Animations
Animations in Angular are declarative: define trigger/transition/animate in the component and toggle state from data; enable app‑wide with provideAnimations().
Animations Essentials
- trigger: Define a named animation bound in the template (e.g.,
[@openClose]). - transition: Declare when it runs (state changes or wildcards like
* <=> *). - animate: Set duration/easing and final styles via
style().
Setup:
- Install:
npm install @angular/animations - Enable: Provide animations app-wide with
provideAnimations()from@angular/platform-browser/animations. - Opt-out: Use
provideNoopAnimations()to disable motion (e.g., in tests).
import { trigger, state, style, transition, animate } from '@angular/animations';
@Component({
animations: [
trigger('openClose', [
state('open', style({ opacity: 1 })),
state('closed', style({ opacity: 0 })),
transition('open <=> closed', [animate('200ms ease-in-out')])
])
]
})
class App {}Example explained
- trigger('openClose'): Defines a named animation used in the template with
[@openClose]. - state(): Declares end styles for each state (e.g.,
openandclosed). - transition('open <=> closed'): Runs when switching between states;
animate('200ms ease-in-out')sets duration/easing.
Notes:
- Related: See Components and Templates.
- Keep animations declarative in the component and toggle via state.
Component Animations
Define triggers on the component.
Toggle state through data to keep templates simple.
<div [@openClose]="open ? 'open' : 'closed'">...</div>
toggle() { this.open = !this.open; }Example
import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';
import { provideAnimations } from '@angular/platform-browser/animations';
@Component({
selector: 'app-root',
standalone: true,
animations: [
trigger('openClose', [
state('open', style({ height: '80px', opacity: 1 })),
state('closed', style({ height: '0px', opacity: 0 })),
transition('open <=> closed', [animate('200ms ease-in-out')])
])
],
template: `
<h3>Animations</h3>
<button (click)="open = !open">Toggle</button>
<div [@openClose]="open ? 'open' : 'closed'" style="overflow:hidden;background:#e3f2fd;margin-top:8px">Panel</div>
`
})
class App { open = true; }
bootstrapApplication(App, { providers: [provideAnimations()] });<app-root></app-root>Example explained
- [@openClose]: Binds the element to the
openClosetrigger and uses the component's state as'open'or'closed'. - Toggling: Clicking the button flips
opento run theopen <=> closedtransition. - provideAnimations(): Enables Angular animations app‑wide so transitions run.
Performance: Use animating opacity/transform for smoother motion; layout properties (like width/height) can be more expensive.
State-driven: Keep animations declarative and driven by component state.
Avoid imperative DOM calls.
Accessibility: Respect prefers-reduced-motion with shorter or disabled animations when appropriate.
import { animation, style, animate, useAnimation } from '@angular/animations';
// Reusable animation definition
export const fadeIn = animation([
style({ opacity: 0 }),
animate('{{time}} ease-out', style({ opacity: 1 }))
]);
// In component trigger:
// transition(':enter', [ useAnimation(fadeIn, { params: { time: '200ms' } }) ])Providing Animations
Use provideAnimations() to enable animations across the app.
Use provideNoopAnimations() in tests or when you want to disable motion.
import { provideAnimations, provideNoopAnimations } from '@angular/platform-browser/animations';
bootstrapApplication(App, { providers: [provideAnimations()] });
// Tests or opt-out:
// bootstrapApplication(App, { providers: [provideNoopAnimations()] });Notes:
- Testing: Disable animations in tests for stable timing using
provideNoopAnimations(). - Conditional enablement: Feature-flag or disable heavy animations on low-power devices.
