1 line
11 KiB
Plaintext
1 line
11 KiB
Plaintext
{"version":3,"file":"DOMKeyframesResolver.mjs","sources":["../../../../src/animation/keyframes/DOMKeyframesResolver.ts"],"sourcesContent":["import { positionalKeys } from \"../../render/utils/keys-position\"\nimport { MotionValue } from \"../../value\"\nimport { findDimensionValueType } from \"../../value/types/dimensions\"\nimport { AnyResolvedKeyframe } from \"../types\"\nimport { getVariableValue } from \"../utils/css-variables-conversion\"\nimport {\n containsCSSVariable,\n isCSSVariableToken,\n} from \"../utils/is-css-variable\"\nimport {\n KeyframeResolver,\n OnKeyframesResolved,\n UnresolvedKeyframes,\n} from \"./KeyframesResolver\"\nimport { WithRender } from \"./types\"\nimport { isNone } from \"./utils/is-none\"\nimport { makeNoneKeyframesAnimatable } from \"./utils/make-none-animatable\"\nimport { isNumOrPxType, positionalValues } from \"./utils/unit-conversion\"\n\nexport class DOMKeyframesResolver<\n T extends AnyResolvedKeyframe\n> extends KeyframeResolver<T> {\n name: string\n element?: WithRender\n\n private removedTransforms?: [string, AnyResolvedKeyframe][]\n private measuredOrigin?: AnyResolvedKeyframe\n\n constructor(\n unresolvedKeyframes: UnresolvedKeyframes<AnyResolvedKeyframe>,\n onComplete: OnKeyframesResolved<T>,\n name?: string,\n motionValue?: MotionValue<T>,\n element?: WithRender\n ) {\n super(unresolvedKeyframes, onComplete, name, motionValue, element, true)\n }\n\n readKeyframes() {\n const { unresolvedKeyframes, element, name } = this\n\n if (!element || !element.current) return\n\n super.readKeyframes()\n\n /**\n * If any keyframe is a CSS variable, we need to find its value by sampling the element\n */\n for (let i = 0; i < unresolvedKeyframes.length; i++) {\n let keyframe = unresolvedKeyframes[i]\n\n if (typeof keyframe === \"string\") {\n keyframe = keyframe.trim()\n\n if (isCSSVariableToken(keyframe)) {\n const resolved = getVariableValue(keyframe, element.current)\n\n if (resolved !== undefined) {\n unresolvedKeyframes[i] = resolved as T\n }\n\n if (i === unresolvedKeyframes.length - 1) {\n this.finalKeyframe = keyframe as T\n }\n }\n }\n }\n\n /**\n * Resolve \"none\" values. We do this potentially twice - once before and once after measuring keyframes.\n * This could be seen as inefficient but it's a trade-off to avoid measurements in more situations, which\n * have a far bigger performance impact.\n */\n this.resolveNoneKeyframes()\n\n /**\n * Check to see if unit type has changed. If so schedule jobs that will\n * temporarily set styles to the destination keyframes.\n * Skip if we have more than two keyframes or this isn't a positional value.\n * TODO: We can throw if there are multiple keyframes and the value type changes.\n */\n if (!positionalKeys.has(name) || unresolvedKeyframes.length !== 2) {\n return\n }\n\n const [origin, target] = unresolvedKeyframes\n const originType = findDimensionValueType(origin)\n const targetType = findDimensionValueType(target)\n\n /**\n * If one keyframe contains embedded CSS variables (e.g. in calc()) and the other\n * doesn't, we need to measure to convert to pixels. This handles GitHub issue #3410.\n */\n const originHasVar = containsCSSVariable(origin)\n const targetHasVar = containsCSSVariable(target)\n\n if (originHasVar !== targetHasVar && positionalValues[name]) {\n this.needsMeasurement = true\n return\n }\n\n /**\n * Either we don't recognise these value types or we can animate between them.\n */\n if (originType === targetType) return\n\n /**\n * If both values are numbers or pixels, we can animate between them by\n * converting them to numbers.\n */\n if (isNumOrPxType(originType) && isNumOrPxType(targetType)) {\n for (let i = 0; i < unresolvedKeyframes.length; i++) {\n const value = unresolvedKeyframes[i]\n if (typeof value === \"string\") {\n unresolvedKeyframes[i] = parseFloat(value as string)\n }\n }\n } else if (positionalValues[name]) {\n /**\n * Else, the only way to resolve this is by measuring the element.\n */\n this.needsMeasurement = true\n }\n }\n\n resolveNoneKeyframes() {\n const { unresolvedKeyframes, name } = this\n\n const noneKeyframeIndexes: number[] = []\n for (let i = 0; i < unresolvedKeyframes.length; i++) {\n if (\n unresolvedKeyframes[i] === null ||\n isNone(unresolvedKeyframes[i])\n ) {\n noneKeyframeIndexes.push(i)\n }\n }\n\n if (noneKeyframeIndexes.length) {\n makeNoneKeyframesAnimatable(\n unresolvedKeyframes,\n noneKeyframeIndexes,\n name\n )\n }\n }\n\n measureInitialState() {\n const { element, unresolvedKeyframes, name } = this\n\n if (!element || !element.current) return\n\n if (name === \"height\") {\n this.suspendedScrollY = window.pageYOffset\n }\n\n this.measuredOrigin = positionalValues[name](\n element.measureViewportBox(),\n window.getComputedStyle(element.current)\n )\n\n unresolvedKeyframes[0] = this.measuredOrigin\n\n // Set final key frame to measure after next render\n const measureKeyframe =\n unresolvedKeyframes[unresolvedKeyframes.length - 1]\n\n if (measureKeyframe !== undefined) {\n element.getValue(name, measureKeyframe).jump(measureKeyframe, false)\n }\n }\n\n measureEndState() {\n const { element, name, unresolvedKeyframes } = this\n\n if (!element || !element.current) return\n\n const value = element.getValue(name)\n value && value.jump(this.measuredOrigin, false)\n\n const finalKeyframeIndex = unresolvedKeyframes.length - 1\n const finalKeyframe = unresolvedKeyframes[finalKeyframeIndex]\n\n unresolvedKeyframes[finalKeyframeIndex] = positionalValues[name](\n element.measureViewportBox(),\n window.getComputedStyle(element.current)\n ) as any\n\n if (finalKeyframe !== null && this.finalKeyframe === undefined) {\n this.finalKeyframe = finalKeyframe as T\n }\n\n // If we removed transform values, reapply them before the next render\n if (this.removedTransforms?.length) {\n this.removedTransforms.forEach(\n ([unsetTransformName, unsetTransformValue]) => {\n element\n .getValue(unsetTransformName)!\n .set(unsetTransformValue)\n }\n )\n }\n\n this.resolveNoneKeyframes()\n }\n}\n"],"names":[],"mappings":"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"} |