Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
@angular/animations
Advanced tools
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.
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
19.0.0-next.9 (2024-10-10)
this.foo
property reads no longer refer to template context variables. If you intended to read the template variable, do not use this.
.factories
property in KeyValueDiffers
has been removed.name
option in the ng add @localize
schematic has been removed in favor of the project
option.BrowserModule.withServerTransition
method has been removed. Please use the APP_ID
DI token to set the application id instead.| Commit | Type | Description |
| -- | -- | -- |
| 09f589f000 | fix | this.a
should always refer to class property a
(#55183) |
| e8d1944999 | fix | add multiple :host and nested selectors support (#57796) |
| 82144b6d63 | fix | allow combinators inside pseudo selectors (#57796) |
| 292ea4714f | fix | fix comment typo (#57796) |
| 69529d8873 | fix | fix parsing of the :host-context with pseudo selectors (#57796) |
| 2374b87b64 | fix | preserve attributes attached to :host selector (#57796) |
| 46a6324c82 | fix | scope :host-context inside pseudo selectors, do not decrease specificity (#57796) |
| bc5f1175e9 | fix | transform pseudo selectors correctly for the encapsulated view (#57796) |
| Commit | Type | Description | | -- | -- | -- | | 8d8c03abc4 | fix | defer symbols only used in types (#58104) |
| Commit | Type | Description |
| -- | -- | -- |
| ee426c62f0 | fix | allow signal write error (#57973) |
| 67db4305c2 | fix | clean up afterRender after it is executed (#58119) |
| 656b5d3e78 | fix | Re-assign error codes to be within core bounds (<1000) (#53455) |
| 97fb86d331 | perf | set encapsulation to None
for empty component styles (#57130) |
| c15ec36bd1 | refactor | remove deprecated factories
Property in KeyValueDiffers
(#58064) |
| Commit | Type | Description | | -- | -- | -- | | bc83fc1e2e | feat | support converting to signal queries in VSCode extension (#58106) |
| Commit | Type | Description |
| -- | -- | -- |
| 9c3bd1b5d1 | refactor | remove deprecated name
option. (#58063) |
| Commit | Type | Description | | -- | -- | -- | | c1aa411cf1 | fix | properly resolve tsconfig paths on windows (#58137) |
| Commit | Type | Description |
| -- | -- | -- |
| 5c61f46409 | refactor | remove deprecated BrowserModule.withServerTransition
method (#58062) |
| Commit | Type | Description |
| -- | -- | -- |
| 9e82559de4 | fix | destroy PlatformRef
when error happens during the bootstrap()
phase (#58112) |
| Commit | Type | Description | | -- | -- | -- | | 1479af978c | feat | finish implementation of refreshAhead feature (#53356) |
<!-- CHANGELOG SPLIT MARKER --><a name="18.2.8"></a>
FAQs
Angular - animations integration with web-animations
The npm package @angular/animations receives a total of 2,733,315 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 2 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
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.