Bye Bye Angular Animation

Ich gebe zu, dass ich, wenn möglich, einen großen Bogen um Angular Animation gemacht habe. Wo aus visuellen Gründen Animationen erforderlich waren, war die Standard-CSS-Animationsbibliothek immer meine erste Wahl. Nicht ganz falsch: Offiziell ist @angular/animations ab Angular 20.2 als deprecated gekennzeichnet. Im offiziellen Migration-Guide wird auf die Standard-CSS-Animationsbibliothek verwiesen, die nun verwendet werden soll.

Zwei Nettigkeiten spendiert Angular uns aber: animate.enter und animate.leave, um weiterhin das Anzeigen und Ausblenden von Komponenten zu ermöglichen. Ein einfaches Beispiel für eine Fade-In Animation mit vertikalem sizing könnte nun so aussehen:

@keyframes size-fade {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 100vh;
  }
}

.fade {
  animation: size-fade 3s;
  overflow: hidden;
}

  <mat-card animate.enter="fade">
....
</mat-card

Diese Deklaration sorgt nun dafür, dass die entsprechende „fade“ CSS Klasse für die Dauer der Animation an das Element angehängt wird: