개 고래입니다.
첫 투고의 이번은 Angular에서 간단한 애니메이션을 움직이는 내용에 대해 투고합니다.
많은 웹 애니메이션은 CSS를 사용하여 움직이고 있지만 Angular에서도 쉽게 만들 수 있습니다.
절차 공개를 위해 Stackblitz 위에서 작업하고 있습니다.

이번 완성 데모

app.module.ts에 Animations 모듈 추가

Angular에서 애니메이션을 사용하려면 BrowserAnimationsModule이 필요하므로 추가합니다.
모듈의 추가 설치가 필요한 경우 추가하십시오.

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; // 追加

import { AppComponent } from './app.component';

@NgModule({
  imports:      [ 
    BrowserModule,
    BrowserAnimationsModule // 追加
  ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

애니메이션으로 움직이는 대상 설정

애니메이션이 시작되는 시점을 감지하기 위해 Angular는 트리거가 필요합니다.
trigger() 함수는 변경을 모니터링하기 위해 속성 이름을 설명합니다. 변경이 발생하면 트리거는 정의에 포함된 조치를 시작합니다. 여기에서는 트리거명을 "fadein-left"를 둡니다.

app.component.html

<div @fadein-left>
  <div>テキスト</div>
</div>

컴포넌트 파일에서 애니메이션 함수 가져오기

이번에는 다음의 함수를 이용합니다.

app.component.ts

import {
  trigger,
  style,
  animate,
  transition,
  query,
  sequence,
} from '@angular/animations';

// …省略

애니메이션 메타데이터 속성 추가

구성 요소 파일의 @Component() 데코레이터에 animations:라는 메타데이터 속성을 추가합니다. 애니메이션을 정의한 트리거를 animations 메타데이터 속성에 배치합니다. 그 중에 이번 트리거가 되는 "fadein-left"를 설정합니다.

app.component.ts

// …省略

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  animations: [
    trigger('fadein-left', [

     // -----------------------------
     // ここにアニメーション内容を書く
     // -----------------------------

    ]),
  ]
})

// …省略

움직이는 내용을 쓰다

드디어 애니메이션 시키고 싶은 내용을 기술합니다.
이번 스토리에서는 화면 왼쪽에서 후왓와 페이드 인하는 흐름이되므로 다음과 같이 설정

app.component.ts

// …省略

  animations: [
    trigger('fadein-left', [

      transition('void => *', [
        sequence([

          // アニメーション１：初期表示位置は不可視化しておく
          query('div', style({
            opacity: 0, // 不可視化
            "margin-left": '-20px'
          })),

          // アニメーション２：スタート開始時間調整(ここでは1秒後に開始)
          query('div', animate('1000ms', style({}))),

          // アニメーション３：2秒かけて左から可視化される
          query('div', animate('2000ms ease-out', style({
            opacity: 1,
            "margin-left": '0px',
          }))),

        ]),
      ]),

    ]),
  ]

// …省略

애니메이션 내용의 보충으로서, 「transition('void => *'」는 HTML 요소라든지 DOM내에 지정의 트리거가 나타났을 때에 미정도리("void")로부터는 정의 끝난*(별표)에 처리되어 해석이 되어 후속의 처리가 자동 실행되는 구조가 됩니다.query는 트리거 정의되고 있는 HTML 요소내의 div에 대해서 처리가 행해집니다.

나중에 쉽게

초기 표시로서 이동원이 되는 거리로부터 비가시화 상태로 합니다.

애니메이션의 시작 밀리초를 지정합니다.

실제로 애니메이션이 시작되어 2초에 걸쳐 왼쪽으로 이동하면서 opacity에 의해 시각화가 행해집니다.

뿐입니다.
아주 간단하네요.



이번 완성 데모