Security News
JavaScript Leaders Demand Oracle Release the JavaScript Trademark
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
@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.
License: MIT
14.1.0 (2022-07-20)
createNgModuleRef
is deprecated in favor of newly added createNgModule
one.inject()
has been deprecated, in favor of the
new options object. Correspondingly, InjectFlags
is deprecated as well.| Commit | Type | Description |
| -- | -- | -- |
| 55308f2df5 | feat | add provideAnimations()
and provideNoopAnimations()
functions (#46793) |
| Commit | Type | Description |
| -- | -- | -- |
| 4a2e7335b1 | feat | make the CommonModule
pipes standalone (#46401) |
| a7597dd080 | feat | make the CommonModule directives standalone (#46469) |
| Commit | Type | Description | | -- | -- | -- | | 33ce3883a5 | feat | Add extended diagnostic to warn when missing let on ngForOf (#46683) | | 6f11a58040 | feat | Add extended diagnostic to warn when text attributes are intended to be bindings (#46161) | | 9e836c232f | feat | warn when style suffixes are used with attribute bindings (#46651) |
| Commit | Type | Description | | -- | -- | -- | | 93c65e7b14 | feat | add extended diagnostic for non-nullable optional chains (#46686) | | 131d029da1 | feat | detect missing control flow directive imports in standalone components (#46146) | | 6b8e60c06a | fix | improve the missingControlFlowDirective message (#46846) |
| Commit | Type | Description |
| -- | -- | -- |
| e8e8e5f171 | feat | add createComponent
function |
| b5153814af | feat | add reflectComponentType
function |
| 96c6139c9a | feat | add ability to set inputs on ComponentRef (#46641) |
| a6d5fe202c | feat | alias createNgModuleRef
as createNgModule
(#46789) |
| 71e606d3c3 | feat | expose EnvironmentInjector on ApplicationRef (#46665) |
| 19e6d9ccd3 | feat | import AsyncStackTaggingZone if available (#46693) |
| a7a14df5f8 | feat | introduce EnvironmentInjector.runInContext
API (#46653) |
| fa52b6e906 | feat | options object to supersede bit flags for inject()
(#46649) |
| af20112222 | feat | support the descendants option for ContentChild queries (#46638) |
| 945a3ad359 | fix | Fix runInContext
for NgModuleRef
injector (#46877) |
| bb7c80477b | fix | make parent injector argument required in createEnvironmentInjector
(#46397) |
| Commit | Type | Description | | -- | -- | -- | | 82acbf919b | feat | improve error message for nullish header (#46059) |
| Commit | Type | Description |
| -- | -- | -- |
| 53ca936366 | feat | Add ability to create UrlTree
from any ActivatedRouteSnapshot
(#45877) |
| de058bba99 | feat | Add CanMatch guard to control whether a Route should match (#46021) |
| 6c1357dd7d | feat | Add stable cancelation code to NavigationCancel
event (#46675) |
| a4ce273e50 | feat | Add the target RouterStateSnapshot
to NavigationError
(#46731) |
| abe3759e24 | fix | allow to return UrlTree
from CanMatchFn
(#46455) |
| e8c7dd10e9 | fix | Ensure APP_INITIALIZER
of enabledBlocking
option completes (#46026) |
| ce20ed067f | fix | Ensure Route injector is created before running CanMatch guards (#46394) |
| 6a7b818d94 | fix | Ensure target RouterStateSnapshot
is defined in NavigationError
(#46842) |
| f94c6f433d | fix | Expose CanMatchFn as public API (#46394) |
| e8ae0fe3e9 | fix | Fix cancelation code for canLoad rejections (#46752) |
| Commit | Type | Description |
| -- | -- | -- |
| e9cb0454dc | feat | more closely align UpgradeModule#bootstrap()
with angular.bootstrap()
(#46214) |
AleksanderBodurri, Alex Rickabaugh, Andrew Kushnir, Andrew Scott, Cédric Exbrayat, Dmitrij Kuba, Dylan Hunn, George Kalpakas, Jessica Janiuk, JiaLiPassion, Joey Perrott, John Vandenberg, JoostK, Keith Li, Or'el Ben-Ya'ir, Paul Gschwendtner, Pawel Kozlowski, SyedAhm3r, arturovt, mariu, markostanimirovic and mgechev
<!-- CHANGELOG SPLIT MARKER --><a name="14.0.7"></a>
FAQs
Angular - animations integration with web-animations
The npm package @angular/animations receives a total of 2,268,690 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.
Security News
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.