안녕 얘들아, 잘 지내니??

카드 목록이 있을 때 사용자 경험을 개선하는 방법에 대해 생각해 본 적이 있습니까!?

오늘은 카드 "캐스케이드"애니메이션으로 어떻게 할 수 있고 Angular Animations의 힘을 사용하여 멋진 카드 페이지를 가질 수 있는지 보여드리겠습니다!

먼저 Angular 애니메이션에 대해 조금 이야기해 봅시다!

각도 애니메이션

Angular 애니메이션은 CSS 기능을 기반으로 하므로 브라우저가 허용하는 모든 속성에 애니메이션을 적용할 수 있으며 재사용 가능한 애니메이션을 수행하고 모든 구성 요소에서 사용할 수 있습니다!

해보자!

먼저

앱에 사용할 수 있는 리소스를 만들어야 하므로 Angular 루트 애플리케이션 모듈에서 BrowserAnimationsModule을 가져와야 합니다!

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({ 
   imports: [
     BrowserAnimationsModule 
   ]
   ...
})

세컨드

재사용 가능한 애니메이션을 만들 것이므로 app 폴더 안에 animations 폴더를 만들고 그 안에 animations.ts 파일을 만들겠습니다! 그리고 아래 이미지와 같은 결과가 있습니다.



이제 애니메이션을 만들어 봅시다!
animations.ts 내부에서 다음과 같은 기능을 가져옵니다.

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

const 생성을 시작하고 trigger 함수를 추가해 보겠습니다.

...

export const animatedListCards = 
   trigger('listCardAnimation', [
      ...     
   ]);

트리거: trigger은 상태, 전환을 가져오고 애니메이션에 이름을 지정합니다!

이제 transition를 구성해야 합니다. * => *를 사용하여 상태를 가져옵니다.

...

export const animatedListCards = 
   trigger('listCardAnimation', [
      transition('* => *'. [
         ...
      ])   
   ]);

전환: 애니메이션이 적용될 시기를 지정해야 하므로 애니메이션transition을 정의해야 합니다!

그런 다음 나머지 애니메이션을 구성해야 합니다!

...

export const animatedListCards = 
   trigger('listCardAnimation', [
      transition('* => *'. [
        query(':enter', style({
          opacity: 0,
        }), {optional: true}),
        query(':enter', stagger('300ms', [
          animate('.8s ease-in', keyframes([
            style({opacity: 0, transform: 'translateY(-30px)', offset: 0}),
            style({opacity: .5, transform: 'translateY(20px)', offset: 0.3}),
            style({opacity: 1, transform: 'translateY(0)', offset: 1}),
          ]))
        ]),{optional: true})
      ])   
   ]);

우리는 위에서 무엇을 했습니까!?
query(:enter)에서 구성 요소의 "들어가기"상태를 지정하고 스타일을 적용하여 카드를 숨깁니다.

그런 다음 query(':enter')를 다시 선택하여 다른 스타일을 적용하고 stagger 기능을 사용하여 애니메이션 시작 시간을 지정합니다. 그리고 animation('.8s ease-in')에서 애니메이션의 전환 스타일을 지정합니다! keyframes() 안에 CSS 속성을 지정하여 애니메이션을 만듭니다!

이제 애니메이션이 구성되었으며 구성 요소에서 사용할 수 있습니다!

이제 @Component() 데코레이터 내부의 animations 속성에 애니메이션을 설정해야 합니다. 아래:

import { animatedListCards } from './animations/animations';

@Component({ 
 ...
 animations: [
   animatedListCards // the animation trigger
 ]
})

그런 다음 데이터 길이(예: 코스 배열)로 애니메이션을 트리거합니다.

<div [@listAnimation]="courses.length">
  <ng-container *ngFor="let course of courses">
    <div class="card">
      <h1>
        {{ this.course.name }}
      </h1>
    </div>
  </ng-container>
</div>

마지막으로 페이지와 사용자 경험을 더욱 즐겁게 만드는 애니메이션이 있습니다!

여기에 live example으로 사용할 수 있는 예제 애플리케이션이 있습니다.



읽어 주셔서 감사합니다!!!