javascript / expert
Snippet
Declarative Animation State via Signal Machines
Managing animation states with Signals provides a cleaner separation of concerns than traditional boolean flags. By using a Signal-based state machine, you can derive complex animation triggers that are strictly typed and reactively bound to the component's view, improving maintainability.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { Component, signal, computed } from '@angular/core';import { trigger, state, style, transition, animate } from '@angular/animations';@Component({animations: [trigger('fade', [state('void', style({ opacity: 0 })),state('*', style({ opacity: 1 })),transition(':enter, :leave', [animate('300ms')])])],template: `<div [@fade] *ngIf="isVisible()">Content</div>`})export class NotificationComponent {private state = signal<'hidden' | 'visible'>('hidden');isVisible = computed(() => this.state() === 'visible');toggle() {this.state.update(s => s === 'hidden' ? 'visible' : 'hidden');}}
angular
Breakdown
1
isVisible = computed(() => this.state() === 'visible');
Derives a read-only signal to drive template visibility without exposing write access.
2
trigger('fade', [ ... ])
Defines metadata-based animation logic that reacts to state changes in the DOM.