ngIf und Kinder Animation - Angular4

Question

Ich habe die folgende Vorlage in Angular 4:

<button (click)="isVisible = !isVisible" >Toggle</button> 

<div class="global-block" *ngIf="isVisible" > 
    <div class="content" [@slideRightLeft]> 
     ... some content here ... 
    </div> 
    <div class="overlay" [@fadeIn]></div> 
</div> 

ich bereits beide slideRightLeft und fadeIn Animation auslösen und Übergang erstellt.

Das Problem ist, dass es für das erste Toggle funktioniert (wenn isVisible == true), aber nicht, wenn ich verstecken es (wenn isVisible == false, die .global-block sofort versteckt und Animationen für Kinder sind nicht sichtbar).

Ich möchte wirklich zwei verschiedene Animationen für die Kinder Element haben, aber ich brauche auch die .global-block

Gibt es eine Möglichkeit zum Umschalten der ngIf zu verzögern? oder vielleicht ist mein Ansatz nicht gut?

Answer 1

Yea ngIf wird diese sofort aus dem DOM entfernen und alle Nachkommen und ihre zugehörigen Animationen entfernen. Sie können es so einrichten, dass die Schaltfläche nur nach einer bestimmten Zeit den Schalter wechselt und auf das Ende der Animationen wartet, oder Sie können eine andere Methode des Verbergens (Sichtbarkeit + Deckkraft) verwenden, die sie nicht aus dem DOM entfernt.

Sie könnten alles in die Animationszustände tatsächlich wickeln - möglicherweise nicht einmal ngIF verwenden müssen. Sie können eine Zeichenfolge verwenden, um zwischen beliebig vielen verschiedenen Animationszuständen zu unterscheiden und sie entsprechend zu formatieren. Man könnte also einen Zustand haben, der "Knopf geklickt" hat, einen weiteren Knopf, der vor 1000ms angeklickt wurde, und einen anderen "Animationen über" (benutze diese Zeichen nicht wörtlich ... aber du verstehst, was ich meine). Dies würde das Verhalten viel vorhersehbarer machen.