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.
19.0.0-next.0 (2024-08-14)
Breaking Changes
core
-
Errors that are thrown during ApplicationRef.tick
will now be rethrown when using TestBed
. These errors should be
resolved by ensuring the test environment is set up correctly to
complete change detection successfully. There are two alternatives to
catch the errors:
- Instead of waiting for automatic change detection to happen, trigger
it synchronously and expect the error. For example, a jasmine test
could write
expect(() => TestBed.inject(ApplicationRef).tick()).toThrow()
TestBed
will reject any outstanding ComponentFixture.whenStable
promises. A jasmine test,
for example, could write expectAsync(fixture.whenStable()).toBeRejected()
.
As a last resort, you can configure errors to not be rethrown by
setting rethrowApplicationErrors
to false
in TestBed.configureTestingModule
.
router
- The
Router.errorHandler
property has been removed.
Adding an error handler should be configured in either
withNavigationErrorHandler
with provideRouter
or the errorHandler
property in the extra options of RouterModule.forRoot
. In addition,
the error handler cannot be used to change the return value of the
router navigation promise or prevent it from rejecting. Instead, if you
want to prevent the promise from rejecting, use resolveNavigationPromiseOnError
. - The return type of the
Resolve
interface now includes
RedirectCommand
.
core
| Commit | Type | Description |
| -- | -- | -- |
| 468d3fb9b1 | fix | rethrow errors during ApplicationRef.tick in TestBed (#57200) |
router
| Commit | Type | Description |
| -- | -- | -- |
| f271021e19 | feat | Add routerOutletData
input to RouterOutlet
directive (#57051) |
| b2790813a6 | fix | Align RouterModule.forRoot errorHandler with provider error handler (#57050) |
| 7436d3180e | fix | Update Resolve interface to include RedirectCommand like ResolveFn (#57309) |
<!-- CHANGELOG SPLIT MARKER -->
<a name="18.2.0"></a>