Heim > Artikel > Web-Frontend > Wie funktionieren CSS-Übergänge mit ngIf 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.
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!