bhylu.com

Advertisements

Angular Animations

Modern Angular supports animate.enter and animate.leave with CSS classes. Prefer these current APIs for simple transitions rather than starting a new example with the older animation package.

How it works

The desk toggles a card and applies brief enter and leave classes. The state summary remains outside the animated view so it reports the operation immediately. CSS also respects prefers-reduced-motion, allowing the same information to appear without a motion requirement. Avoid using animation timing as a hidden prerequisite for validation or committing a domain operation.

Run the code

Use a separate empty project folder with a compatible Node version: ^22.22.3, ^24.15.0 or a supported 26+ runtime. The review uses Node 24.22.1, Angular 22.2.4, CLI/build 22.2.5 and TypeScript 6.0.3. Node 22.15.1 is too old for Angular 22. Save every download at its displayed path; browsers may keep only the basename, so recreate the src folder. Run npm install, npm run build and npm start, then open the loopback address printed by the server. Run npm test for the supplied component tests. These are local teaching projects, not Bhylu publishing files.

The small loopback server serves the compiled app and fixed, read-only tool API fixtures. It is not a database, authentication or lending service. Angular examples do not run in Bhylu’s current HTML or TypeScript playground. No Apache, MySQL or PHP configuration change is needed.

Example

src/app.ts

import { Component } from '@angular/core';
import { signal } from '@angular/core';

@Component({
  selector: 'bh-animations',
  standalone: true,
  imports: [],
  template: `<button type="button" (click)="visible.update(toggle)">Toggle card</button>
    @if (visible()) {
      <div class="tool-card" animate.enter="fade-in" animate.leave="fade-out">
        Clamp ready
      </div>
    }
    <p data-result>{{ visible() ? 'Card shown' : 'Card hidden' }}</p>`,
  styles: [
    `
      .fade-in {
        animation: appear 120ms ease-out;
      }
      .fade-out {
        animation: disappear 120ms ease-in;
      }
      @keyframes appear {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }
      @keyframes disappear {
        from {
          opacity: 1;
        }
        to {
          opacity: 0;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .fade-in,
        .fade-out {
          animation-duration: 1ms;
        }
      }
    `,
  ],
})
export class App {
  visible = signal(false);
  toggle = (value: boolean) => !value;
}

Expected result

Card hidden

The review toggles the card in and out, checks the state text and waits for the leaving element to be removed. It also runs with reduced motion. The control stays a keyboard-operable button and the meaning does not depend on seeing the transition.

Advertisements