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,
|