@engie-group/fluid-design-system-angular/src/shared/animations.ts

Fluid Design System Angular

import {animate, AnimationTriggerMetadata, state, style, transition, trigger} from '@angular/animations';
import {njSemanticMotionEasingLinearOutSlowIn} from '@engie-group/fluid-design-tokens';

export const selectAnimations: {
  readonly transformList: AnimationTriggerMetadata;
} = {
  transformList: trigger('transformList', [
    state(
      'void',
      style({
        transform: 'scaleY(0.8)',
        opacity: 0,
      }),
    ),
    state(
      '*',
      style({
        opacity: 1,
        transform: 'scaleY(1)',
      }),
    ),
    transition('void => *', animate(`120ms ${njSemanticMotionEasingLinearOutSlowIn}`)),
    transition('* => void', animate(`100ms 25ms ${njSemanticMotionEasingLinearOutSlowIn}`, style({opacity: 0}))),
  ]),
};