angular2 animation

angular2에서의 animation은 state의 변경으로 제어가 가능합니다. 기존의 css를 지정해주었던 것에서 많은 변화가 생긴것이지요.

animation을 사용하기 위해서는 다음 모듈들을 import시켜야지 됩니다.

import {
  Component,
  Input,
  trigger,
  state,
  style,
  transition,
  animate
} from '@angular/core';

후에 @Component에서 animations를 다음과 같이 정의합니다.

  animations: [
    trigger('showDetailed', [
      state('summary', style({ height: '0px', display: 'none' })),
      state('detailed', style({ height: '250px', display: 'inherit' })),
      transition('summary <=> detailed', animate(250)),
    ])
  ]

각 항목은 다음과 같습니다.

• trigger(name): state 이름을 정합니다.
• state(stateName): state의 상태이름을 지정하고, 상태이름일때의 style 를 지정합니다.
• transaction: state 상태의 변경시에 동작할 animation을 지정합니다. 상태는 =>, <=> 을 지정합니다.

angular2에서의 animation은 상태의 변화시에 동작 이라고 정의하면 이해하기 쉽습니다.

간단히 showDetailed trigger의 summary와 detailed 상태의 변화에 있어서 summary일때의 최종 style과detailed상태일때의 최종 style을 지정해주고, state의 변경시에 발생되는 animation의 시간과 style을 정해주는 것으로 animation 효과를 넣을 수 있습니다.

주로 사용될 style들은 다음과 같습니다.

• mouse-over: {transform: translateX(0) scale(1.1)}
• mouse-leave: {transform: translateX(0) scale(1)}
• show: { height: '200px', display: 'inherit' }
• hide: { height: '0px', display: 'none' }

summary

angular2에서는 state라는 개념을 이용해서 animation을 넣어줍니다. 이는 객체의 상태 변화와 View에서의 animation을 적절히 조화시킬 수 있는 멋진 방법입니다. 그런데 이를 이용하기 위해서는 결국은 view component를 어떻게 잘 나누어서 설계하느냐에 대한 설계상의 이슈가 발생됩니다. 예전 개발 패턴대로 html 하나에 모두 때려 넣는것이 아닌, 하나하나의 Component로 Page 자체를 설계하는 View단에서의 객체지향적 개발 패턴이 필요합니다. 재미있어요.