Angular 2
एनीमेशन

अशक्त राज्यों के बीच संक्रमण

    @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 {

    }
]

कई राज्यों के बीच एनिमेटेड

इस टेम्पलेट में <div> 50px और फिर 100px बढ़ता है और फिर बटन क्लिक करने पर वापस 20px तक सिकुड़ जाता है।

प्रत्येक state में एक संबद्ध शैली @Component मेटाडेटा में वर्णित है।

जो भी state लिए तर्क सक्रिय है उसे घटक तर्क में प्रबंधित किया जा सकता है। इस मामले में, घटक चर size स्ट्रिंग मान "छोटा", "मध्यम" या "बड़ा" रखता है।

<div> तत्व उस मान का जवाब देता है जो @Component मेटाडेटा में निर्दिष्ट trigger माध्यम से @Component है: [@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';
        }
    }
}