Gewusst wie: Hinzufügen von Animationen in Angular 2

Question

Ich habe eine Formularkomponente mit Feldern, einige Felder, die ich animieren möchte, wenn sie im Formular angezeigt werden, aber nicht jedes Feld.

<div *ngFor="let field of form.Fields"> 
    <div [ngSwitch]="field.Type" [@slideOut]> 
     <!-- more field stuff --> 
    </div> 
</div> 

mit anderen Attributen ich so etwas wie diese [attr.required]="field.Required" tun können, aber [attr.@slideOut] scheint nicht zu funktionieren.

Idealerweise hätte ich gerne eine Animationseigenschaft auf meinem Feld, damit ich Animationen wie diese weiterleiten kann [@field.Animation] aber ich kann keine Dokumentation darüber finden, wie ich sowas machen würde. Irgendwelche Ideen?

Answer 1

Ich bin auf ein ähnliches Problem gestoßen und habe festgestellt, dass Sie einen etwas anderen Ansatz wählen müssen.

In Angular sind Animationen mit dem Status verknüpft. Anstatt also einen anderen Auslöser für Ihre Animation in Ihrem HTML zu definieren, möchten Sie mehrere Zustände definieren, auf die Ihr Auslöser in Ihrer Komponentenklasse achten kann. Anstatt Animationen direkt aus einer Methode auszulösen, legen Sie den Status des Objekts fest, mit dem eine Animation verknüpft ist.

So zum Beispiel könnte ich Folgendes in der Komponente Decorator nach dem Importieren der erforderlichen Module definieren.

@Component({ 
    selector: 'app-some-animated', 
    templateUrl: './some.component.html', 
    styleUrls: ['./some-animated.component.scss'], 
    animations: [ 
    trigger('flyInOut', [ 
     transition("void => fly", [ 
     animate(300, keyframes([ 
      style({transform: 'translateX(100%)', opacity: 0}), 
      style({transform: 'translateX(0)', opacity: 1}) 
     ])) 
     ] 
    ) 
    ]), 
    trigger('flyInOut', [ 
     transition("void => fade", [ 
      animate(300, keyframes([ 
      style({opacity: 0}), 
      style({opacity: 1}) 
      ])) 
     ] 
    ) 
    ]) 
    ] 
}) 

In diesem Fall mache ich die Animationen geschehen, sobald das Element instanziiert wird. Und in der ngOnInit() Methode setze ich this.watchMe auf "fly" oder "fade".

Im HTML Ich Anbringen der flyInOut Trigger wie folgt:

<div [@flyInOut]="watchMe"> 
    Some content... 
</div> 

In Ihrem Fall Sie wahrscheinlich den gewünschten Zustand zu Ihren Feldobjekten oder als iterable Zustand von Ihrem * ngFor hinzufügen mögen.

This article von Coursetro hat eine schöne Erklärung und ein Video zu.