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.
17.1.0 (2024-01-17)
compiler
| Commit | Type | Description |
| -- | -- | -- |
| 79ff91a813 | fix | allow TS jsDocParsingMode host option to be programmatically set (#53126) |
| 5613051a8b | fix | allow TS jsDocParsingMode host option to be programmatically set again (#53292) |
| df8a825910 | fix | project empty block root node (#53620) |
| 478d622265 | fix | project empty block root node in template pipeline (#53620) |
compiler-cli
| Commit | Type | Description |
| -- | -- | -- |
| abdc7e4578 | feat | support type-checking for generic signal inputs (#53521) |
| e620b3a724 | fix | add compiler option to disable control flow content projection diagnostic (#53311) |
| 4c1d69e288 | fix | add diagnostic for control flow that prevents content projection (#53190) |
| 76ceebad04 | fix | do not throw fatal error if extended type check fails (#53896) |
| 1a6eaa0fea | fix | input transform in local compilation mode (#53645) |
| 56a76d73e0 | fix | modify getConstructorDependencies
helper to work with reflection host after the previous change (#52215) |
core
| Commit | Type | Description |
| -- | -- | -- |
| 863be4b698 | feat | expose new input
API for signal-based inputs (#53872) |
| 94096c6ede | feat | support TypeScript 5.3 (#52572) |
| 69b384c0d1 | fix | SignalNode
reactive node incorrectly exposing unset field (#53571) |
| 6f79507ea7 | fix | Change defer block fixture default behavior to playthrough (#53956) |
| 32f908ab70 | fix | do not accidentally inherit input transforms when overridden (#53571) |
| bdd61c768a | fix | replace assertion with more intentional error (#52234) |
| 0daca457bb | fix | TestBed should still use the microtask queue to schedule effects (#53843) |
router
| Commit | Type | Description |
| -- | -- | -- |
| 5c1d441029 | feat | Add info property to NavigationExtras
(#53303) |
| 50d7916278 | feat | Add router configuration to resolve navigation promise on error (#48910) |
| a5a9b408e2 | feat | Add transient info to RouterLink input (#53784) |
| 726530a9af | feat | Allow onSameUrlNavigation: 'ignore'
in navigateByUrl
(#52265) |
<!-- CHANGELOG SPLIT MARKER -->
<a name="17.0.9"></a>