How to use the @angular/animations.useAnimation function in @angular/animations

import {Component, OnInit} from '@angular/core';
import {Hero} from '../../shared/hero.model';
import {ActivatedRoute, Router} from '@angular/router';
import {Location} from '@angular/common';
import {transition, trigger, useAnimation} from '@angular/animations';
import {fadeIn} from 'ng-animate';
import {RoutesConfig} from '../../../../configs/routes.config';

@Component({
  selector: 'app-hero-detail-page',
  templateUrl: './hero-detail-page.component.html',
  styleUrls: ['./hero-detail-page.component.scss'],
  animations: [
    trigger('fadeIn', [transition('* => *', useAnimation(fadeIn, {
      params: {timing: 1, delay: 0}
    }))])
  ]
})

export class HeroDetailPageComponent implements OnInit {

  hero: Hero;

  constructor(private location: Location,
              private router: Router,
              private activatedRoute: ActivatedRoute) {
  }

  ngOnInit() {
    this.hero = this.activatedRoute.snapshot.data.hero;

trigger('shake', [transition('* => *', useAnimation(shake))]),
    trigger('swing', [transition('* => *', useAnimation(swing))]),
    trigger('tada', [transition('* => *', useAnimation(tada))]),
    trigger('wobble', [transition('* => *', useAnimation(wobble))]),
    trigger('jello', [transition('* => *', useAnimation(jello))]),

    trigger('bounceIn', [transition('* => *', useAnimation(bounceIn))]),
    trigger('bounceInDown', [transition('* => *', useAnimation(bounceInDown))]),
    trigger('bounceInLeft', [transition('* => *', useAnimation(bounceInLeft))]),
    trigger('bounceOut', [transition('* => *', useAnimation(bounceOut))]),
    trigger('bounceOutRight', [
      transition('* => *', useAnimation(bounceOutRight)),
    ]),
    trigger('bounceOutUp', [transition('* => *', useAnimation(bounceOutUp))]),

    trigger('fadeIn', [transition('* => *', useAnimation(fadeIn))]),
    trigger('fadeInDown', [transition('* => *', useAnimation(fadeInDown))]),
    trigger('fadeInLeft', [transition('* => *', useAnimation(fadeInLeft))]),
    trigger('fadeOut', [transition('* => *', useAnimation(fadeOut))]),
    trigger('fadeOutUp', [transition('* => *', useAnimation(fadeOutUp))]),
    trigger('fadeOutRight', [transition('* => *', useAnimation(fadeOutRight))]),

    trigger('slideInDown', [transition('* => *', useAnimation(slideInDown))]),
    trigger('slideInLeft', [transition('* => *', useAnimation(slideInLeft))]),
    trigger('slideOutUp', [transition('* => *', useAnimation(slideOutUp))]),
    trigger('slideOutRight', [
      transition('* => *', useAnimation(slideOutRight)),
    ]),

    trigger('flip', [transition('* => *', useAnimation(flip))]),
    trigger('flipInX', [transition('* => *', useAnimation(flipInX))]),
    trigger('flipInY', [transition('* => *', useAnimation(flipInY))]),

trigger('rotateOutUpLeft', [
      transition('* => *', useAnimation(rotateOutUpLeft)),
    ]),
    trigger('rotateOutDownRight', [
      transition('* => *', useAnimation(rotateOutDownRight)),
    ]),

    trigger('hinge', [transition('* => *', useAnimation(hinge))]),
    trigger('jackInTheBox', [transition('* => *', useAnimation(jackInTheBox))]),
    trigger('rollIn', [transition('* => *', useAnimation(rollIn))]),
    trigger('rollOut', [transition('* => *', useAnimation(rollOut))]),

    trigger('zoomIn', [transition('* => *', useAnimation(zoomIn))]),
    trigger('zoomInLeft', [transition('* => *', useAnimation(zoomInLeft))]),
    trigger('zoomInDown', [transition('* => *', useAnimation(zoomInDown))]),
    trigger('zoomOut', [transition('* => *', useAnimation(zoomOut))]),
    trigger('zoomOutUp', [transition('* => *', useAnimation(zoomOutUp))]),
    trigger('zoomOutRight', [transition('* => *', useAnimation(zoomOutRight))]),
  ],
})
export class AppComponent {
  attentionSeekers = [
    'bounce',
    'flash',
    'pulse',
    'rubberBand',
    'shake',
    'swing',
    'tada',
    'wobble',
    'jello',
  ];

export function fadeInRightBigAnimation(options?: IFadeInRightBigAnimationOptions): AnimationTriggerMetadata {
  return trigger((options && options.anchor) || 'fadeInRightBig', [
    transition(
      '0 => 1',
      [
        ...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
        group([
          useAnimation(fadeInRightBig),
          ...(!options || !options.animateChildren || options.animateChildren === 'together'
            ? [query('@*', animateChild(), { optional: true })]
            : [])
        ]),
        ...(options && options.animateChildren === 'after' ? [query('@*', animateChild(), { optional: true })] : [])
      ],
      {
        params: {
          delay: (options && options.delay) || 0,
          duration: (options && options.duration) || DEFAULT_DURATION,
          translate: (options && options.translate) || '2000px'
        }
      }
    )
  ]);
}

export function collapseOnLeaveAnimation(options?: IAnimationOptions): AnimationTriggerMetadata {
  return trigger((options && options.anchor) || 'collapseOnLeave', [
    transition(
      ':leave',
      [
        ...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
        group([
          useAnimation(collapse),
          ...(!options || !options.animateChildren || options.animateChildren === 'together'
            ? [query('@*', animateChild(), { optional: true })]
            : [])
        ]),
        ...(options && options.animateChildren === 'after' ? [query('@*', animateChild(), { optional: true })] : [])
      ],
      {
        params: {
          delay: (options && options.delay) || 0,
          duration: (options && options.duration) || DEFAULT_DURATION
        }
      }
    )
  ]);
}

import { transition, trigger, useAnimation } from '@angular/animations';

import { slideInAnimation } from '-shop/shared/animations/slide-in.animation';
import { slideOutAnimation } from '-shop/shared/animations/slide-out.animation';

export const visibilityChange = trigger('visibilityChange', [
  transition(':enter', [
    useAnimation(slideInAnimation, {
      params: {
        from: '20%',
        timings: '200ms ease-in'
      }
    })
  ]),
  transition(':leave', [
    useAnimation(slideOutAnimation, {
      params: {
        to: '-200%',
        timings: '200ms ease-in'
      }
    })
  ])
]);

trigger('slideInDown', [transition('* => *', useAnimation(slideInDown))]),
    trigger('slideInLeft', [transition('* => *', useAnimation(slideInLeft))]),
    trigger('slideOutUp', [transition('* => *', useAnimation(slideOutUp))]),
    trigger('slideOutRight', [
      transition('* => *', useAnimation(slideOutRight)),
    ]),

    trigger('flip', [transition('* => *', useAnimation(flip))]),
    trigger('flipInX', [transition('* => *', useAnimation(flipInX))]),
    trigger('flipInY', [transition('* => *', useAnimation(flipInY))]),
    trigger('flipOutX', [transition('* => *', useAnimation(flipOutX))]),
    trigger('flipOutY', [transition('* => *', useAnimation(flipOutY))]),

    trigger('lightSpeedIn', [transition('* => *', useAnimation(lightSpeedIn))]),
    trigger('lightSpeedOut', [
      transition('* => *', useAnimation(lightSpeedOut)),
    ]),

    trigger('rotateIn', [transition('* => *', useAnimation(rotateIn))]),
    trigger('rotateInDownLeft', [
      transition('* => *', useAnimation(rotateInDownLeft)),
    ]),
    trigger('rotateInUpRight', [
      transition('* => *', useAnimation(rotateInUpRight)),
    ]),
    trigger('rotateOut', [transition('* => *', useAnimation(rotateOut))]),
    trigger('rotateOutUpLeft', [
      transition('* => *', useAnimation(rotateOutUpLeft)),
    ]),
    trigger('rotateOutDownRight', [
      transition('* => *', useAnimation(rotateOutDownRight)),
    ]),

export function fadeOutCollapseOnLeaveAnimation(options?: IAnimationOptions): AnimationTriggerMetadata {
  return trigger((options && options.anchor) || 'fadeOutCollapseOnLeave', [
    transition(
      ':leave',
      [
        ...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
        group([
          useAnimation(fadeOutCollapse),
          ...(!options || !options.animateChildren || options.animateChildren === 'together'
            ? [query('@*', animateChild(), { optional: true })]
            : [])
        ]),
        ...(options && options.animateChildren === 'after' ? [query('@*', animateChild(), { optional: true })] : [])
      ],
      {
        params: {
          delay: (options && options.delay) || 0,
          duration: (options && options.duration) || DEFAULT_DURATION
        }
      }
    )
  ]);
}

transition('* => *', useAnimation(rotateInUpRight)),
    ]),
    trigger('rotateOut', [transition('* => *', useAnimation(rotateOut))]),
    trigger('rotateOutUpLeft', [
      transition('* => *', useAnimation(rotateOutUpLeft)),
    ]),
    trigger('rotateOutDownRight', [
      transition('* => *', useAnimation(rotateOutDownRight)),
    ]),

    trigger('hinge', [transition('* => *', useAnimation(hinge))]),
    trigger('jackInTheBox', [transition('* => *', useAnimation(jackInTheBox))]),
    trigger('rollIn', [transition('* => *', useAnimation(rollIn))]),
    trigger('rollOut', [transition('* => *', useAnimation(rollOut))]),

    trigger('zoomIn', [transition('* => *', useAnimation(zoomIn))]),
    trigger('zoomInLeft', [transition('* => *', useAnimation(zoomInLeft))]),
    trigger('zoomInDown', [transition('* => *', useAnimation(zoomInDown))]),
    trigger('zoomOut', [transition('* => *', useAnimation(zoomOut))]),
    trigger('zoomOutUp', [transition('* => *', useAnimation(zoomOutUp))]),
    trigger('zoomOutRight', [transition('* => *', useAnimation(zoomOutRight))]),
  ],
})
export class AppComponent {
  attentionSeekers = [
    'bounce',
    'flash',
    'pulse',
    'rubberBand',
    'shake',
    'swing',
    'tada',

export function rotateOutDownRightAnimation(options?: IRotateOutDownRightAnimationOptions): AnimationTriggerMetadata {
  return trigger((options && options.anchor) || 'rotateOutDownRight', [
    transition(
      '0 => 1',
      [
        ...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
        style({ 'transform-origin': 'right bottom' }),
        group([
          useAnimation(rotateOutDownRight),
          ...(!options || !options.animateChildren || options.animateChildren === 'together'
            ? [query('@*', animateChild(), { optional: true })]
            : [])
        ]),
        ...(options && options.animateChildren === 'after' ? [query('@*', animateChild(), { optional: true })] : [])
      ],
      {
        params: {
          delay: (options && options.delay) || 0,
          duration: (options && options.duration) || DEFAULT_DURATION,
          degrees: (options && options.degrees) || -45
        }
      }
    )
  ]);
}