Angular

Enhancing Angular Applications with Web Animations API

Why Use the Web Animations API?

Faster Performance: Works directly with the browser for smoother animations.
More Control: Unlike CSS animations, it allows fine-tuning and runtime modifications.
Interactive Animations: Adjust animations dynamically based on user actions.

Using the Web Animations API in Angular

Let's explore how You can Enhance Angular Applications with web Animation API

1. Importing Necessary Modules

Angular provides built-in animation support through @angular/animations, but for more control, we use Element.animate() from WAAPI.

2. Creating a Simple Animation

import { Component, ElementRef, ViewChild } from '@angular/core';
@Component({
  selector: 'app-animated-box',
  template: '<div #box class="box" (click)="animateBox()">Click Me</div>',
  styles: ['.box { width: 100px; height: 100px; background: blue; cursor: pointer; }']
})
export class AnimatedBoxComponent {
  @ViewChild('box', { static: true }) box!: ElementRef;
  animateBox() {
    this.box.nativeElement.animate(
      [
        { transform: 'scale(1)', opacity: 1 },
        { transform: 'scale(1.2)', opacity: 0.5 },
        { transform: 'scale(1)', opacity: 1 }
      ],
      {
        duration: 500,
        iterations: 1,
        easing: 'ease-in-out'
      }
    );
  }
}