Function createAnimation

core/src/utils/animation/animation.ts:33–995

(animationId?: string)

type AnimationReadWriteCallback = () => void;

export const createAnimation = (animationId?: string): Animation => {
  let _delay: number | undefined;
  let _duration: number | undefined;
  let _easing: string | undefined;
  let _iterations: number | undefined;
  let _fill: AnimationFill | undefined;
  let _direction: AnimationDirection | undefined;
  let _keyframes: AnimationKeyFrames = [];
  let beforeAddClasses: string[] = [];
  let beforeRemoveClasses: string[] = [];
  let initialized = false;
  let parentAnimation: Animation | undefined;
  let beforeStylesValue: { [property: string]: any } = {};
  let afterAddClasses: string[] = [];
  let afterRemoveClasses: string[] = [];
  let afterStylesValue: { [property: string]: any } = {};
  let numAnimationsRunning = 0;
  let shouldForceLinearEasing = false;
  let shouldForceSyncPlayback = false;
  let cssAnimationsTimerFallback: ReturnType<typeof setTimeout> | undefined;
  let forceDirectionValue: AnimationDirection | undefined;
  let forceDurationValue: number | undefined;
  let forceDelayValue: number | undefined;
  let willComplete = true;
  let finished = false;
  let shouldCalculateNumAnimations = true;
  let ani: Animation;
  let paused = false;

  const id: string | undefined = animationId;
  const onFinishCallbacks: AnimationOnFinishCallback[] = [];
  const onFinishOneTimeCallbacks: AnimationOnFinishCallback[] = [];
  const onStopOneTimeCallbacks: AnimationOnStopCallback[] = [];
  const elements: HTMLElement[] = [];
  const childAnimations: Animation[] = [];
  const stylesheets: HTMLElement[] = [];
  const _beforeAddReadFunctions: AnimationReadWriteCallback[] = [];
  const _beforeAddWriteFunctions: AnimationReadWriteCallback[] = [];
  const _afterAddReadFunctions: AnimationReadWriteCallback[] = [];
  const _afterAddWriteFunctions: AnimationReadWriteCallback[] = [];
  const webAnimations: globalThis.Animation[] = [];
  const supportsAnimationEffect =
    typeof (AnimationEffect as any) === 'function' ||
    (win !== undefined && typeof (win as any).AnimationEffect === 'function');
  /**
   * This is a feature detection for Web Animations.
   *
   * Certain environments such as emulated browser environments for testing,
   * do not support Web Animations. As a result, we need to check for support
   * and provide a fallback to test certain functionality related to Web Animations.
   */
  const supportsWebAnimations =
    typeof (Element as any) === 'function' &&
    typeof (Element as any).prototype!.animate === 'function' &&
    supportsAnimationEffect;

  const getWebAnimations = () => {
    return webAnimations;