Wie animiere ich von ngIf gesteuerte Elemente in Angular 2?

Angular 2 ngIf und CSS-Übergänge/Animationen

Diese Frage befasst sich mit den Herausforderungen beim Durchführen von CSS-Übergängen oder Animationen an Elementen, die vom ngIf manipuliert werden Direktive in Angular 2.

Problem

Das Ziel besteht darin, den Eingang eines Elements von rechts mithilfe von CSS zu animieren. Wenn ngIf jedoch zunächst zum Ausblenden des Elements verwendet wird, wird der Übergang nicht ausgelöst.

Lösung

Das Hauptproblem liegt im Verhalten von ngIf. Wenn der mit ngIf verknüpfte Ausdruck falsch wird, wird das Element aus dem DOM entfernt. Da Übergänge und Animationen erfordern, dass das Element im DOM vorhanden ist, funktioniert die Anwendung auf ein Element, das nicht gerendert wird, nicht.

Um dieses Problem zu beheben, wird empfohlen, „hidden“ anstelle von „ngIf“ zu verwenden, um das auszublenden Element zunächst.

Aktualisierte Lösung (Angular 4.1.0 und höher)

In Angular 4.1.0 und späteren Versionen besteht der bevorzugte Ansatz in der Verwendung von Angular-Animationen. Hier ist eine aktualisierte Lösung, die Animationen verwendet:

<code class="typescript">import { trigger, style, animate, transition } from '@angular/animations';

// ...

@Component({
  animations: [
    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 }))
        ])
      ]
    )
  ]
})

// ...

<div *ngIf="show" [@enterAnimation]></div></code>

Diese Lösung fügt der Komponente namens „enterAnimation“ einen Auslöser hinzu und definiert Übergänge sowohl für den Eintritts- als auch für den Austrittsstatus. Der Übergang umfasst Stile für Transformation und Deckkraft, sodass das Element mit Animation von rechts hineingleiten kann.

Beachten Sie, dass diese Lösung für Angular 4.1.0 und höher gilt. Für ältere Versionen bleibt die Verwendung von Hidden der empfohlene Ansatz.

Das obige ist der detaillierte Inhalt vonWie animiere ich von ngIf gesteuerte Elemente in Angular 2?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!