Angular Ionic 스크롤 이벤트 감지 / Angular animation 앵귤러 애니메이션

 <ion-content [scrollEvents]="true" (ionScroll)="ionScroll($event)">
 [ngClass]="setTopbarStyle()" scrollAnimation="introTop">

import { AnimationBuilder } from '@angular/animations';
import { Injectable } from '@angular/core';
import { fromFadeIn, fromFadeOut, toFadeIn, toFadeOut } from './animation/fade.animation';
import { fromFocusIn, toFocusIn } from './animation/fucus.animation';
import {
  fromIntroBottom,
  fromIntroBottomStagger,
  fromIntroleft, fromIntroRight,
  fromIntroTop,
  toIntroBottom,
  toIntroLeft,
  toIntroRight,
  toIntroTop
} from './animation/into.animation';


export type ScrollAnimation =
  'fadeIn' | 'fadeOut' |
  'introTop' | 'introRight' | 'introBottom' | 'introLeft' |
  'introBottomStagger' |
  'focusIn';

@Injectable()
export class ScrollAnimationService {

  constructor(
    private animationBuilder: AnimationBuilder,
  ) { }

  build(scrollAnimation: ScrollAnimation) {
    switch (scrollAnimation) {
      case 'fadeIn':
        return { properties: toFadeIn, animation: this.animationBuilder.build(fromFadeIn) };
      case 'fadeOut':
        return { properties: toFadeOut, animation: this.animationBuilder.build(fromFadeOut) };
      case 'introTop': // 요렇게 사용!
        return { properties: toIntroTop, animation: this.animationBuilder.build(fromIntroTop) };
      case 'introRight':
        return { properties: toIntroRight, animation: this.animationBuilder.build(fromIntroRight) };
      case 'introBottom':
        return { properties: toIntroBottom, animation: this.animationBuilder.build(fromIntroBottom) };
      case 'introLeft':
        return { properties: toIntroLeft, animation: this.animationBuilder.build(fromIntroleft) };
      case 'focusIn':
        return { properties: toFocusIn, animation: this.animationBuilder.build(fromFocusIn) };
      case 'introBottomStagger':
        return { properties: toFadeIn, animation: this.animationBuilder.build(fromIntroBottomStagger) };
    }
  }
}