@angular/animations
Advanced tools
Package description
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.
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 {}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.
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.
GSAP is a robust, professional-grade animation library for the web. It is highly performant and feature-rich, offering advanced sequencing, staggering, and easing options. While it can be used with Angular, it does not provide the same level of framework integration and may require more manual setup compared to @angular/animations.
Changelog
18.0.0-next.6 (2024-04-25)
matchesElement method has been removed from AnimationDriver as it is unused.async has been removed, use waitForAsync instead.By default we now prevent caching of HTTP requests that require authorization . To opt-out from this behaviour use the includeRequestsWithAuthHeaders option in withHttpTransferCache.
Example:
withHttpTransferCache({
includeRequestsWithAuthHeaders: true,
})
StateKey, TransferState and makeStateKey have been removed from @angular/platform-browser, use the same APIs from @angular/core.getCurrencySymbol, getLocaleCurrencyCode, getLocaleCurrencyName, getLocaleCurrencySymbol, getLocaleDateFormat, getLocaleDateTimeFormat, getLocaleDayNames, getLocaleDayPeriods, getLocaleDirection, getLocaleEraNames, getLocaleExtraDayPeriodRules, getLocaleExtraDayPeriods, getLocaleFirstDayOfWeek, getLocaleId, getLocaleMonthNames, getLocaleNumberFormat, getLocaleNumberSymbol, getLocalePluralCase, getLocaleTimeFormat, getLocaleWeekEndRange, getNumberOfCurrencyDigitsHttpClientModule, HttpClientXsrfModule and HttpClientJsonpModule
As mentionned, those modules can be replaced by provider function only.
| Commit | Type | Description |
| -- | -- | -- |
| bcce85af72 | refactor | remove deprecated matchesElement from AnimationDriver (#55479) |
| Commit | Type | Description | | -- | -- | -- | | d34c033902 | refactor | Deprecate Local Data API functions (#54483) |
| Commit | Type | Description | | -- | -- | -- | | 7a16d7e969 | fix | don't type check the bodies of control flow nodes in basic mode (#55360) |
| Commit | Type | Description |
| -- | -- | -- |
| a730f09ae9 | feat | Add a public API to establish events to be replayed and an attribute to mark an element with an event handler. (#55356) |
| 5f06ca8f55 | feat | add HOST_TAG_NAME token (#54751) |
| ac863ded48 | feat | provide ExperimentalPendingTasks API (#55487) |
| 5a10f405d3 | fix | complete the removal of deprecation async function (#55491) |
| c175bca364 | fix | DeferBlockFixture.render should not wait for stability (#55271) |
| 9894278e71 | fix | make ActivatedRoute inject correct instance inside @defer blocks (#55374) |
| 5948193e13 | fix | skip defer timers on the server (#55480) |
| Commit | Type | Description |
| -- | -- | -- |
| 6f88d80758 | feat | allow caching requests with different origins between server and client (#55274) |
| 8eacb6e4b9 | feat | exclude caching for authenticated HTTP requests (#55034) |
| ef665a40a5 | refactor | Deprecate HttpClientModule & related modules (#54020) |
| Commit | Type | Description |
| -- | -- | -- |
| f914f6a362 | feat | Migration schematics for HttpClientModule (#54020) |
| Commit | Type | Description | | -- | -- | -- | | cba336d4f1 | refactor | remove deprecated transfer state APIs (#55474) |
| Commit | Type | Description |
| -- | -- | -- |
| 5674c644ab | fix | add nonce attribute to event record script (#55495) |
| Commit | Type | Description |
| -- | -- | -- |
| 4a42961393 | feat | withNavigationErrorHandler can convert errors to redirects (#55370) |
<a name="17.3.6"></a>
Readme
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
FAQs
Angular - animations integration with web-animations
The npm package @angular/animations receives a total of 2,587,104 weekly downloads. As such, @angular/animations popularity was classified as popular.
We found that @angular/animations demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.