2016-08-09 39 views
0

Ich benutze Angular 2 - RC3.Wie man eine Animation auf ein Objekt anwendet, das entfernt wird, ohne ein Timeout zu verwenden

Mein Problem ist, ich habe ein Element, das mit einem * ngIf angezeigt oder ausgeblendet wird. Wenn das Objekt angezeigt oder ausgeblendet wird, möchte ich eine Animation anwenden.

Ich kann eine Animation anwenden, wenn das Element zum ersten Mal angezeigt wird, indem einfach eine Klasse hinzugefügt wird. Aber das Problem ist, wenn es entfernt wird, wird das Objekt vom Bildschirm entfernt, bevor die Animation starten/beenden kann.

Ich weiß, dass Sie dies überwinden können, indem Sie einen Timer setzen, um das Entfernen zu verzögern, damit die Animation beendet werden kann. Aber ich möchte keine Timer überall dort hinstellen, wo ich diese Funktionalität brauche.

Gibt es einen einfacheren Weg in Angular, um dies zu erreichen?

Ich möchte nicht JQuery verwenden ist entweder.

Antwort

0

Verwenden Sie [hidden] Direktive für Ihr Element, da es nicht das Rendering des Elements wie * ngIf verhindert.

[ausgeblendet] bedeutet, dass es Speicherplatz in Ihrem DOM-Dokument belegt, aber die Anzeige ist auf none !important eingestellt.

* ngIf auf der anderen Seite entfernt das Element aus dem DOM vollständig

+0

was, wenn es ein Element ist, das aus dem DOM entfernt werden muss. Zum Beispiel - beim Löschen eines Elements aus einer Liste, um Löschanimation auf das Element anzuwenden, das gelöscht wird. – user3607282

+0

Nun können Sie es tun, indem Sie CSS-Übergänge mit Opazität von 1,0 bis 0,0 in 1 Sekunde gehen und dann ein Element aus der Liste spleißen. nach 1000ms in einer Zeitüberschreitung. – MatWaligora