Heim  >  Artikel  >  Web-Frontend  >  Wie funktionieren CSS-Übergänge mit ngIf in Angular 2?

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

Patricia Arquette
Patricia ArquetteOriginal
2024-10-31 21:17:291064Durchsuche

How to Make CSS Transitions Work with 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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn