Angular 2
Animation

Übergang zwischen Nullzuständen

    @Component({
        ...
        animations: [
            trigger('appear', [
                transition(':enter', [
                    style({
                      //style applied at the start of animation
                    }),
                animate('300ms ease-in', style({
                    //style applied at the end of animation
                }))
                ])
            ])
        ]
    })
    class AnimComponent {

    }
]

Animieren zwischen mehreren Zuständen

Das <div> in dieser Vorlage wächst auf 50px und dann auf 50px und 100px dann auf 20px wenn Sie auf die Schaltfläche klicken.

Jedem state ist ein Stil zugeordnet, der in den @Component Metadaten beschrieben wird.

Die Logik für den jeweils aktiven state kann in der Komponentenlogik verwaltet werden. In diesem Fall enthält die size der Komponentenvariablen den Zeichenfolgenwert "small", "medium" oder "large".

Das <div> Element auf diesen Wert durch die reagiert trigger in den angegebenen @Component Metadaten: [@size]="size" .

@Component({
  template: '<div [@size]="size">Some Text</div><button (click)="toggleSize()">TOGGLE</button>',
  animations: [
    trigger('size', [
      state('small', style({
        height: '20px'
      })),
      state('medium', style({
        height: '50px'
      })),
      state('large', style({
        height: '100px'
      })),
      transition('small => medium', animate('100ms')),
      transition('medium => large', animate('200ms')),
      transition('large => small', animate('300ms'))
    ])
  ]
})
export class TestComponent {

    size: string;

    constructor(){
        this.size = 'small';
    }
    toggleSize(){
        switch(this.size) {
            case 'small':
                this.size = 'medium';
                break;
            case 'medium':
                this.size = 'large';
                break;
            case 'large':
                this.size = 'small';
        }
    }
}