Socket
Socket
Sign inDemoInstall

@angular/animations

Package Overview
Dependencies
Maintainers
2
Versions
770
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@angular/animations

Angular - animations integration with web-animations


Version published
Weekly downloads
2.6M
decreased by-0.06%
Maintainers
2
Install size
1.73 MB
Created
Weekly downloads
 

Package description

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

Changelog

Source

18.1.0 (2024-07-10)

common

| Commit | Type | Description | | -- | -- | -- | | f25653e231 | fix | typo in NgOptimizedImage warning (#56756) | | 9b35726e42 | fix | typo in warning for NgOptimizedDirective (#56817) |

compiler

| Commit | Type | Description | | -- | -- | -- | | fd6cd0422d | feat | Add extended diagnostic to warn when there are uncalled functions in event bindings (#56295) | | 341a116d61 | fix | allow more characters in let declaration name (#56764) | | 2a1291e942 | fix | give precedence to local let declarations over parent ones (#56752) |

compiler-cli

| Commit | Type | Description | | -- | -- | -- | | 66e582551e | fix | avoid duplicate diagnostics for let declarations read before definition (#56843) | | 4d18c5bfd5 | fix | flag all conflicts between let declarations and local symbols (#56752) | | 9e21582456 | fix | Show template syntax errors in local compilation modified (#55855) | | 5996502921 | fix | type check let declarations nested inside nodes (#56752) | | cdebf751e4 | fix | used before declared diagnostic not firing for control flow blocks (#56843) |

core

| Commit | Type | Description | | -- | -- | -- | | ea3c802056 | feat | Add a schematic to migrate afterRender phase flag (#55648) | | 5df3e78c99 | feat | add equality function to rxjs-interop toSignal (#56447) | | 0a48d584f2 | feat | add support for let syntax (#56715) | | 352e0782ec | feat | expose signal input metadata in ComponentMirror (#56402) | | a655e46447 | feat | Redesign the afterRender & afterNextRender phases API (#55648) | | e5a6f91722 | feat | support TypeScript 5.5 (#56096) | | 38effcc63e | fix | Add back phase flag option as a deprecated API (#55648) | | 86bcfd3e49 | fix | improve docs on afterRender hooks (#56522) | | b2445a0953 | fix | link errors to ADEV (#55554) (#56038) | | 03a2acd2a3 | fix | properly remove imports in the afterRender phase migration (#56524) | | 4d87b9e899 | fix | rename the equality function option in toSignal (#56769) (#56922) | | 8bd4c074af | fix | toSignal equal option should be passed to inner computed (#56903) |

forms

| Commit | Type | Description | | -- | -- | -- | | 00bde8b1c2 | fix | Make NgControlStatus host bindings OnPush compatible (#55720) |

http

| Commit | Type | Description | | -- | -- | -- | | cc21989132 | fix | Make Content-Type header case insensitive (#56541) |

language-service

| Commit | Type | Description | | -- | -- | -- | | b400e2e4d4 | feat | autocompletion for the component not imported (#55595) | | 67b2c336bc | fix | import the default exported component correctly (#56432) |

router

| Commit | Type | Description | | -- | -- | -- | | a13f5da773 | feat | Allow UrlTree as an input to routerLink (#56265) | | 1d3a7529b4 | feat | Set a different browser URL from the one for route matching (#53318) |

<!-- CHANGELOG SPLIT MARKER -->

<a name="18.0.7"></a>

Readme

Source

Angular

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

Package last updated on 10 Jul 2024

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc