1 line
12 KiB
Plaintext
1 line
12 KiB
Plaintext
{"version":3,"file":"start.mjs","sources":["../../../src/view/start.ts"],"sourcesContent":["import { secondsToMilliseconds } from \"motion-utils\"\nimport { GroupAnimation } from \"../animation/GroupAnimation\"\nimport { NativeAnimation } from \"../animation/NativeAnimation\"\nimport { NativeAnimationWrapper } from \"../animation/NativeAnimationWrapper\"\nimport { AnimationPlaybackControls } from \"../animation/types\"\nimport { getValueTransition } from \"../animation/utils/get-value-transition\"\nimport { mapEasingToNativeEasing } from \"../animation/waapi/easing/map-easing\"\nimport { applyGeneratorOptions } from \"../animation/waapi/utils/apply-generator\"\nimport type { ViewTransitionBuilder } from \"./index\"\nimport { ViewTransitionTarget } from \"./types\"\nimport { chooseLayerType } from \"./utils/choose-layer-type\"\nimport { css } from \"./utils/css\"\nimport { getViewAnimationLayerInfo } from \"./utils/get-layer-info\"\nimport { getViewAnimations } from \"./utils/get-view-animations\"\nimport { hasTarget } from \"./utils/has-target\"\n\nconst definitionNames = [\"layout\", \"enter\", \"exit\", \"new\", \"old\"] as const\n\nexport function startViewAnimation(\n builder: ViewTransitionBuilder\n): Promise<GroupAnimation> {\n const { update, targets, options: defaultOptions } = builder\n\n if (!document.startViewTransition) {\n return new Promise(async (resolve) => {\n await update()\n resolve(new GroupAnimation([]))\n })\n }\n\n // TODO: Go over existing targets and ensure they all have ids\n\n /**\n * If we don't have any animations defined for the root target,\n * remove it from being captured.\n */\n if (!hasTarget(\"root\", targets)) {\n css.set(\":root\", {\n \"view-transition-name\": \"none\",\n })\n }\n\n /**\n * Set the timing curve to linear for all view transition layers.\n * This gets baked into the keyframes, which can't be changed\n * without breaking the generated animation.\n *\n * This allows us to set easing via updateTiming - which can be changed.\n */\n css.set(\n \"::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*)\",\n { \"animation-timing-function\": \"linear !important\" }\n )\n\n css.commit() // Write\n\n const transition = document.startViewTransition(async () => {\n await update()\n\n // TODO: Go over new targets and ensure they all have ids\n })\n\n transition.finished.finally(() => {\n css.remove() // Write\n })\n\n return new Promise((resolve) => {\n transition.ready.then(() => {\n const generatedViewAnimations = getViewAnimations()\n\n const animations: AnimationPlaybackControls[] = []\n\n /**\n * Create animations for each of our explicitly-defined subjects.\n */\n targets.forEach((definition, target) => {\n // TODO: If target is not \"root\", resolve elements\n // and iterate over each\n for (const key of definitionNames) {\n if (!definition[key]) continue\n const { keyframes, options } =\n definition[key as keyof ViewTransitionTarget]!\n\n for (let [valueName, valueKeyframes] of Object.entries(\n keyframes\n )) {\n if (!valueKeyframes) continue\n\n const valueOptions = {\n ...getValueTransition(\n defaultOptions as any,\n valueName\n ),\n ...getValueTransition(options as any, valueName),\n }\n\n const type = chooseLayerType(\n key as keyof ViewTransitionTarget\n )\n\n /**\n * If this is an opacity animation, and keyframes are not an array,\n * we need to convert them into an array and set an initial value.\n */\n if (\n valueName === \"opacity\" &&\n !Array.isArray(valueKeyframes)\n ) {\n const initialValue = type === \"new\" ? 0 : 1\n valueKeyframes = [initialValue, valueKeyframes]\n }\n\n /**\n * Resolve stagger function if provided.\n */\n if (typeof valueOptions.delay === \"function\") {\n valueOptions.delay = valueOptions.delay(0, 1)\n }\n\n valueOptions.duration &&= secondsToMilliseconds(\n valueOptions.duration\n )\n\n valueOptions.delay &&= secondsToMilliseconds(\n valueOptions.delay\n )\n\n const animation = new NativeAnimation({\n ...valueOptions,\n element: document.documentElement,\n name: valueName,\n pseudoElement: `::view-transition-${type}(${target})`,\n keyframes: valueKeyframes,\n })\n\n animations.push(animation)\n }\n }\n })\n\n /**\n * Handle browser generated animations\n */\n for (const animation of generatedViewAnimations) {\n if (animation.playState === \"finished\") continue\n\n const { effect } = animation\n if (!effect || !(effect instanceof KeyframeEffect)) continue\n\n const { pseudoElement } = effect\n if (!pseudoElement) continue\n\n const name = getViewAnimationLayerInfo(pseudoElement)\n if (!name) continue\n\n const targetDefinition = targets.get(name.layer)\n\n if (!targetDefinition) {\n /**\n * If transition name is group then update the timing of the animation\n * whereas if it's old or new then we could possibly replace it using\n * the above method.\n */\n const transitionName = name.type === \"group\" ? \"layout\" : \"\"\n let animationTransition = {\n ...getValueTransition(defaultOptions, transitionName),\n }\n\n animationTransition.duration &&= secondsToMilliseconds(\n animationTransition.duration\n )\n\n animationTransition =\n applyGeneratorOptions(animationTransition)\n\n const easing = mapEasingToNativeEasing(\n animationTransition.ease,\n animationTransition.duration!\n ) as string\n\n effect.updateTiming({\n delay: secondsToMilliseconds(\n animationTransition.delay ?? 0\n ),\n duration: animationTransition.duration,\n easing,\n })\n\n animations.push(new NativeAnimationWrapper(animation))\n } else if (\n hasOpacity(targetDefinition, \"enter\") &&\n hasOpacity(targetDefinition, \"exit\") &&\n effect\n .getKeyframes()\n .some((keyframe) => keyframe.mixBlendMode)\n ) {\n animations.push(new NativeAnimationWrapper(animation))\n } else {\n animation.cancel()\n }\n }\n\n resolve(new GroupAnimation(animations))\n })\n })\n}\n\nfunction hasOpacity(\n target: ViewTransitionTarget | undefined,\n key: \"enter\" | \"exit\" | \"layout\"\n) {\n return target?.[key]?.keyframes.opacity\n}\n"],"names":[],"mappings":"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"} |