Angular 2
생기

null 상태 간 전환

    @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 로 50px 다음 100px 로 50px 다음 버튼을 클릭하면 20px 로 축소됩니다.

각 state 에는 @Component 메타 데이터에 설명 된 관련 스타일이 있습니다.

활성화 된 state 에 대한 논리는 구성 요소 논리에서 관리 할 수 ​​있습니다. 이 경우 구성 요소 변수의 size 는 문자열 값 "small", "medium"또는 "large"를 유지합니다.

<div> 요소는 @Component 메타 데이터에 지정된 trigger 통해 해당 값에 응답합니다. [@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';
        }
    }
}