Wie verwende ich CSS-Übergänge und -Animationen mit der ngIf-Direktive von Angular 2?

Angular 2 ngIf und CSS-Übergang/Animation

Die ngIf-Direktive von Angular 2 wird häufig zum bedingten Rendern von Elementen basierend auf einem bestimmten Ausdruck verwendet. Bei der Verwendung von CSS-Übergängen oder Animationen für diese Elemente kann es jedoch zu unerwartetem Verhalten kommen.

Beachten Sie den folgenden Codeausschnitt:

// ...
<div class="note" [ngClass]="{'transition':show}" *ngIf="show">
  <p> Notes</p>
</div>
// ...

In diesem Beispiel besteht das Ziel darin, dass ein div-Element erstellt wird Schieben Sie es mit CSS von rechts nach innen, wenn show auf „true“ gesetzt ist. Die *ngIf-Direktive stellt sicher, dass das Element nur gerendert wird, wenn show wahr ist, aber wenn show falsch ist, wird das Element vollständig aus dem DOM entfernt.

Das Problem entsteht, weil CSS-Animationen oder Übergänge dies vom Zielelement erfordern für die Dauer der Animation im DOM vorhanden sein. Da *ngIf das Element entfernt, wenn show falsch ist, werden alle im CSS definierten Übergänge nicht wirksam.

Lösung:

Um dieses Problem zu beheben, wird empfohlen um das Attribut [hidden] anstelle von ngIf zum Ausblenden von Elementen zu verwenden, die animiert werden sollen.

// ...
<div class="note" [ngClass]="{'transition':show}" [hidden]="!show">
  <p> Notes</p>
</div>
// ...

Durch die Verwendung von [hidden] ist das Element weiterhin im DOM vorhanden, seine Sichtbarkeit wird jedoch auf „versteckt“ gesetzt. wenn Show falsch ist. Dadurch wird sichergestellt, dass das Element für die Anwendung von CSS-Animationen oder Übergängen verfügbar ist.

Das obige ist der detaillierte Inhalt vonWie verwende ich CSS-Übergänge und -Animationen mit der ngIf-Direktive von Angular 2?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!