javascript / expert
Snippet
Deklarative Animationszustände via Signal-Zustandsmaschinen
Das Verwalten von Animationszuständen mit Signals bietet eine sauberere Trennung von Belangen als herkömmliche boolesche Flags. Durch die Verwendung einer signalbasierten Zustandsmaschine können Sie komplexe Animations-Trigger ableiten, die streng typisiert und reaktiv an die Ansicht der Komponente gebunden sind, was die Wartbarkeit verbessert.
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
Erklärung
1
isVisible = computed(() => this.state() === 'visible');
Leitet ein schreibgeschütztes Signal ab, um die Sichtbarkeit im Template zu steuern, ohne Schreibzugriff zu gewähren.
2
trigger('fade', [ ... ])
Definiert metadatenbasierte Animationslogik, die auf Zustandsänderungen im DOM reagiert.