Dust

앵귤러에서 애니메이션을 사용하고 싶으면 모듈에 

BrowserModule

BrowserAnimationsModule

추가

모듈파일

// main.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    MainComponent,
  ],
  exports: [
    MainComponent,
  ],
  imports: [
    CommonModule,
    BrowserModule,
    BrowserAnimationsModule
  ]
})
export class MainModule{}

ts 파일

// ts 파일
import { Component } from '@angular/core';
import {
  trigger,
  state,
  style,
  animate,
  transition
} from '@angular/animations';

@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.css'],
  // 애니메이션 정의
  animations:[
    // 애니메이션 작성
    trigger('openClose', [
         // *
        state('open', style({
          height: '100px',
          opacity: 1,
          background: 'green'
        })),
        state('closed', style({
          height: '100px',
          // height: 속성을 주지 않을 경우 당연하지만 height가 내용에 맞게 줄어듬
          opacity: 0.5,
          background: 'orange',
        })),
        // **
        transition('open => closed', [
          animate('1s')
        ]),
        transition('closed => open', [
          animate('0.5s')
        ])
      ]
    )
  ]
})

export class MainComponent{
  isOpen = true;
  toggle(){
    this.isOpen = !this.isOpen;
  }
}

*

state() 함수는 트랜지션이 완료된 시점의 스타일을 지정함

애니메이션이 종료되면 스타일은 그대로 적용됨(애니메이션이 비활성화되면 state 함수에 지정한 스타일이 남아있음)

**

transition() 함수는 애니메이션이 진행되는 동안의 스타일을 지정함

해당 코드에서 => 연산자는 단방향 트랜지션을 의미

<=> 는 양방향 트랜지션을 의미함

예를 들어 open에서 closed로, closed에서 open으로 가는 시간이 같다면

transition('open <=> closed', [

  animate('1s')

]),

animate는 트랜지션이 진행되는 시간임

상태 전환을 여러번 표현할 수 있음, 또한 정의된 순서로 매칭되기 때문에 

예를 들어 * => *의 트랜지션은 다른 트랜지션보다 제일 나중에 정의 되어야 함(참고 젤 하단)

@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.css'],
  animations:[
    trigger('openClose', [
        state('open', style({
          height: '100px',
          opacity: 1,
          background: 'green'
        })),
        state('closed', style({
          height: '100px',
          opacity: 0.5,
          background: 'orange',
        })),
        // 이런식으로 가능함
        transition('open => closed, closed => end', [
          animate('1s')
        ]),
      ]
    )
  ]
})

html 파일

<button type="button" (click)="toggle()">애니메이션 버튼</button>
<!-- 클릭했을 때 값 변경 -->

<div [@openClose]="isOpen ? 'open' : 'closed'">
<!-- * -->
  <p>애니메이션 {{ isOpen ? 'open' : 'closed' }}</p>
</div>

*

@심볼을 붙여 컴포넌트 템플릿과 트리거 이름을 연결함

[@트리거이름]="애니메이션 상태를 선택하는 평가식"

애니메이션 트리거는 *ngIf로도 시작할 수 있음

애니메이션 비활성화

<div [@.disabled]="false">
  <button type="button" (click)="toggle()">애니메이션 버튼</button>
  <div [@openClose]="isOpen ? 'open' : 'closed'">
    <p>애니메이션 {{ isOpen ? 'open' : 'closed' }}</p>
  </div>
</div>

애니메이션이 활성화 된 상단 element에 @.disabled 값을 바인딩하면

자식 element까지 애니메이션이 비활성화 됨

참고

https://angular.kr/guide/animations#%EB%8D%94-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0

https://angular.kr/guide/transition-and-triggers#%EB%AF%B8%EB%A6%AC-%EC%A0%95%EC%9D%98%EB%90%9C-%EC%83%81%ED%83%9C%EC%99%80-%EC%99%80%EC%9D%BC%EB%93%9C%EC%B9%B4%EB%93%9C-%EB%A7%A4%EC%B9%AD