@angular/animations

What is @angular/animations?

The @angular/animations package provides powerful animation capabilities and tools to Angular applications. It allows developers to define complex animations and transitions in a declarative manner, directly within their Angular components.

What are @angular/animations's main functionalities?

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

Other packages similar to @angular/animations

react-spring

React-spring is a spring-physics based animation library for React applications. It provides a similar declarative API for defining animations but is tailored for React instead of Angular. It offers a different set of primitives and hooks for creating animations in a React environment.

animejs

Anime.js is a lightweight JavaScript animation library that works with any web framework, including Angular. It provides a more imperative approach to animations and includes a wide range of features for animating CSS properties, SVG, DOM attributes, and JavaScript Objects. It is not as tightly integrated with Angular as @angular/animations.

README

Angular

The sources for this package are in the main Angular repo. Please file issues and pull requests against that repo.

Usage information and reference details can be found in Angular documentation.

License: MIT

Changelog

17.2.0 (2024-02-14)

common

| Commit | Type | Description | | -- | -- | -- | | 03c3b3eb79 | feat | add Netlify image loader (#54311) | | f5c520b836 | feat | add placeholder to NgOptimizedImage (#53783) |

compiler

| Commit | Type | Description | | -- | -- | -- | | 47e6e84101 | feat | Add a TSConfig option useTemplatePipeline (#54057) | | 66e940aebf | feat | scope selectors in @starting-style (#53943) | | 7b4d275f49 | fix | Fix the template pipeline option (#54148) |

compiler-cli

| Commit | Type | Description | | -- | -- | -- | | 7e861c640e | feat | generate extra imports for component local dependencies in local mode (#53543) | | 3263df23f2 | feat | generate global imports in local compilation mode (#53543) | | b774e22d8e | feat | make it configurable to generate alias reexports (#53937) | | 3e1384048e | feat | support host directives for local compilation mode (#53877) | | a592904c69 | fix | allow custom/duplicate decorators for @Injectable classes in local compilation mode (#54139) | | 4b1d948b36 | fix | consider the case of duplicate Angular decorators in local compilation diagnostics (#54139) | | 96bcf4fb12 | fix | forbid custom/duplicate decorator when option forbidOrphanComponents is set (#54139) | | 64fa5715c6 | fix | generating extra imports in local compilation mode when cycle is introduced (#53543) | | 6c8b09468a | fix | highlight the unresolved element in the @Component.styles array for the error LOCAL_COMPILATION_UNRESOLVED_CONST (#54230) | | 0970129e20 | fix | show proper error for custom decorators in local compilation mode (#53983) | | f39cb06418 | fix | show specific error for unresolved @Directive.exportAs in local compilation mode (#54230) | | f3851b5945 | fix | show specific error for unresolved @HostBinding's argument in local compilation mode (#54230) | | 39ddd884e8 | fix | show specific error for unresolved @HostListener's event name in local compilation mode (#54230) | | 5d633240fd | fix | show the correct message for the error LOCAL_COMPILATION_UNRESOLVED_CONST when an unresolved symbol used for @Component.styles (#54230) | | 58b8a232d6 | fix | support jumping to definitions of signal-based inputs (#54053) |

core

| Commit | Type | Description | | -- | -- | -- | | 702ab28b4c | feat | add support for model inputs (#54252) | | e95ef2cbc6 | feat | expose queries as signals (#54283) | | 656bc282e3 | fix | add toString implementation to signals (#54002) | | 62b87b4551 | fix | do not crash for signal query that does not have any matches (#54353) | | 4b96f370ee | fix | expose model signal subcribe for type checking purposes (#54357) | | 744cb1e561 | fix | return the same children query results if there are no changes (#54392) | | 6d00115bf4 | fix | show placeholder block on the server with immediate trigger (#54394) |

http

| Commit | Type | Description | | -- | -- | -- | | 1c536250b6 | fix | Use string body to generate transfer cache key. (#54379) |

<!-- CHANGELOG SPLIT MARKER -->

<a name="17.1.3"></a>