Angular 2 hat seinen Beta-Status verlassen und liegt in einer finalen Version vor. Fester Bestandsteil der Version ist die deklarative Entwicklung von CSS Animationen.
Animationen die durch Angular gesteuert werden sollen werden innerhalb der konkreten Komponenten festgelegt. Dazu bietet das „@Component“ Element ein entsprechendes Attribut. Im Kern bestehen die hier abgelegten Animationen aus „States“ (festgelegte Zustände) und „Transitions“ (der Übergang zwischen diesen Zuständen) die mit entsprechenden Style- und Animations-Angaben versehen werde können. Die States sind selbst gewählte String-Werte die später in der Anwendung die Animationen triggern.
Hallo Komponente
Schauen wir uns erst einmal ein ganz einfaches Beispiel an (die verwendeten Komponenten wie ‘trigger’, ‘style’ etc. stammen alle aus dem Modul ‘@angular/core’):
@Component({
animations: [
trigger("fadeIn", [
transition("void => *", [
style({ opacity: 0 }),
animate('2s ease'),
])
]),
],
template: "
<div @fadeIn>...content...</div>
"
})
export class AnimationComponent {...}
Unsere Deklaration beginnt mit einem eindeutigen Bezeichner („trigger), den wir auch später im Template wieder finden werden. In diesem einfachen Beispiel definierten wir keinen eigenen State sondern verwenden zwei Vordefinierte und deklarieren nur die Übergänge zwischen den Beiden. „*“ ist eine Wildcard und bezeichnet jeden Zustand, „void“ bezeichnet den Zustand wenn ein Element noch nicht in der GUI angezeigt wird. Mit „transition“ geben wir nun den Übergang zwischen zwei Zuständen an. In unserem Beispiel handelt es sich um eine klassische Fade In-Animation ( void => * , von „nicht sichtbar“ in einen „beliebig anderen Status“). Innerhalb der „transition“ geben wir nun die Stylings an, die zu Beginn dieser Animation gesetzt werden sollen und die gewünschten Animationsangaben. Das Styling am Ende der Animation wird durch das bestehende CSS definiert. Die Verknüpfung im Template geschieht nun über den angegeben Trigger, dieser wird mit einem vorangestellten „@“ an das HTML-Element geschrieben welches mit der Animation versehen werden soll
Mein State
Mit eigenen States können wir den Status einer Animation an unsere Anwendungslogik binden. Ein Beispiel hierzu ist das Starten einer Animation auf Basis einer Benutzerinteraktion. Hierzu definierten wir ein oder mehrere Zustände welche die Styling-Informationen beinhalten welche die HTML-Komponente in diesem Zustand (am Ende der Animation) haben soll. Hier ein Beispiel: (dieses ließe sich auch durch die Verwendung von *ngIf und analog zum ersten Beispiel umsetzen)
@Component({
animations: [
trigger('moveInTop', [
state("true", style({transform: "translateY(0%)", opacity: 1})),
state("false", style({transform: "translateY(-500%)", opacity: 0})),
transition("* => 1", [
style({transform: "translateY(-50%)", opacity: 0}),
animate("1s")
]),
transition("1 => 0", [
animate("1s ease")
])
])
],
template: `<button type="button" class="btn-primary btn-lg" on-click="toggleShow()">Click me</button>\n\
<div [@moveInTop]="show" (@moveInTop.done)="afterAnimation($event)>...content...</div>
`
})
export class AnimationComponent {
show=false;
toggleShow(){
this.show=!this.show;
}
afterAnimation(event:AnimationTransitionEvent){
//...
}
}
Wir legen zwei Zustände fest „true“ und „false“ und versehen diese mit den Styling-Angaben welche die HTML-Komponente haben soll wenn dieser Zustand aktiv ist (also am Ende der Animation). Der Zustand wird durch ein Attribut in unserem Controller festgelegt („[@moveInTop=’show’]“) und wird durch einen entsprechenden Button verändert. Ist der Status „false“ ist das Element nicht zu sehen und wird nach oben außerhalb der Anzeige verschoben. Ändert sich nun der State auf „true“ (* => 1) wird zu Beginn der Animation das Styling der Transition angewendet, bevor mit der angegeben Animation-Einstellungen das Styling des States „true“ angewendet wird. Demzufolge wird das DIV zuerst auf die Position -50% verschoben, dann unter Verwendung der Animation auf den Wert 0% verschoben. Ändert sich der State hingegen auf „false“ (1 => 0) wird das Element wieder außerhalb des Bildschirms verschoben und auf nicht sichtbar gestellt. Zusätzlich sehen wir im obigen Beispiel einer der beiden Callbacks für Animationen („start“ und „done“) welche entsprechend des Animationsstatus ausgeführt werden und zum Beispiel dazu genutzt werden können um bei Abschluss der Animation eine weitere Aktion aus zu führen.
Neben den hier gezeigten Möglichkeiten bieten die Animationen von Angular 2 noch einige weitere Features wie automatische Berechnung von Größen und Keyframe- und paralelle Animationen die in der Dokumentation zu finden sind: https://angular.io/docs/ts/latest/guide/animations.html
Demo:
Github – Komponente
Github – Animationen
( es bietet sich an Animationen welche Komponenten übergreifend verwendet werden sollen zentral zu deklarieren, das Beispiel tut dies über eine globale TypeScript Datei „animations.ts“
