swimlane/ngx-ui

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

import { StepperAnimationStates } from './stepper-animation-states.enum';
import { StepperBarAnimationStates } from './stepper-bar-animation-states.enum';

const BAR_THICKNESS = 2;
const BAR_STEP_RATIO = 1.4;

export const stepperAnimations = {
  horizontalStepTransition: trigger('stepHorizontalTransition', [
    state(StepperAnimationStates.Left, style({ transform: 'translate3d(-100%, 0, 0)', visibility: 'hidden' })),
    state(StepperAnimationStates.Right, style({ transform: 'translate3d(100%, 0, 0)', visibility: 'hidden' })),
    state(StepperAnimationStates.Current, style({ transform: 'none', visibility: 'visible' })),
    transition('* => *', animate('500ms cubic-bezier(0.35, 0, 0.25, 1)'))
  ]),

  verticalStepTransition: trigger('stepVerticalTransition', [
    state(StepperAnimationStates.Up, style({ transform: 'translate3d(0, -100%, 0)', visibility: 'hidden' })),
    state(StepperAnimationStates.Down, style({ transform: 'translate3d(0, 100%, 0)', visibility: 'hidden' })),
    state(StepperAnimationStates.Current, style({ transform: 'none', visibility: 'visible' })),
    transition(`* <=> ${StepperAnimationStates.Current}`, animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)'))
  ]),

  horizontalBarTransition: trigger('stepperBarHorizontalTransition', [
    state(
      StepperBarAnimationStates.Stay,
      style({
        transition: '500ms cubic-bezier(0.35, 0, 0.25, 1)',
        transform: 'translateX({{ xOffset }}px)',
        height: `${BAR_THICKNESS}px`,
        width: `calc(${BAR_STEP_RATIO} * {{ width }}px)`
      }),
      { params: { xOffset: 0, width: 0 } }
    ),
    state(
      StepperBarAnimationStates.Move,
      style({
        transition: '500ms cubic-bezier(0.35, 0, 0.25, 1)',
        transform: 'translateX({{ xOffset }}px)',
        height: `${BAR_THICKNESS}px`,
        width: `calc({{ width }}px * ${BAR_STEP_RATIO} / 2)`,
        'margin-left': `calc(${BAR_STEP_RATIO} * {{ width }}px / 4)`
      }),
      { params: { xOffset: 0, width: 0 } }
    )
  ]),

  verticalBarTransition: trigger('stepperBarVerticalTransition', [
    state(
      StepperBarAnimationStates.Stay,
      style({
        transition: '500ms cubic-bezier(0.35, 0, 0.25, 1)',
        transform: 'translateY({{ yOffset }}px)',
        width: `${BAR_THICKNESS}px`,
        height: `calc(${BAR_STEP_RATIO} * {{ height }}px)`
      }),
      { params: { yOffset: 0, height: 0 } }
    ),
    state(
      StepperBarAnimationStates.Move,
      style({
        transition: '500ms cubic-bezier(0.35, 0, 0.25, 1)',
        transform: 'translateY({{ yOffset }}px)',
        width: `${BAR_THICKNESS}px`,
        height: `calc({{ height }}px * ${BAR_STEP_RATIO} / 2)`,
        'margin-top': `calc(${BAR_STEP_RATIO} * {{ height }}px / 4)`
      }),
      { params: { yOffset: 0, height: 0 } }
    )
  ])
};