Wie funktionieren CSS-Übergänge mit ngIf in Angular 2?

ngIf und CSS-Übergang/Animation in Angular 2

Frage:

Bei Verwendung von ngIf zur Anzeige eines Div in Angular 2, warum funktionieren CSS-Übergänge nicht, wenn das Element zunächst ausgeblendet ist?

Antwort:

ngIf entfernt das Element aus dem DOM, wenn seine Bedingung falsch wird. Übergänge können jedoch nicht auf nicht vorhandene Elemente angewendet werden.

Lösung:

Für einen reibungslosen Übergang verwenden Sie [hidden] anstelle von [ngIf]:

<code class="typescript"><div class="note" [ngClass]="{'transition':show}" [hidden]="!show"></code>

Auf diese Weise bleibt das Element im DOM und Übergänge können angewendet werden, wenn sich seine Show-Eigenschaft ändert.

Aktualisierte Lösungen mit Angular-Animationen

In Angular 4.1.0 und 2.1 .0 bieten Angular-Animationen eine verbesserte Möglichkeit, Übergänge mit ngIf zu erreichen.

Angular 4.1.0 und höher:

<code class="typescript">trigger('enterAnimation', [
  transition(':enter', [
    style({transform: 'translateX(100%)', opacity: 0}),
    animate('500ms', style({transform: 'translateX(0)', opacity: 1}))
  ]),
  transition(':leave', [
    style({transform: 'translateX(0)', opacity: 1}),
    animate('500ms', style({transform: 'translateX(100%)', opacity: 0}))
  ])
])</code>

Angular 2.1.0 :

Dieser Ansatz verwendet den animate()-Helfer, der in 2.1.0 eingeführt wurde. Weitere Informationen finden Sie in der Dokumentation zu Angular-Animationen.

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