framer-motion
Version:
A simple and powerful JavaScript animation library
1 lines • 4.16 kB
Source Map (JSON)
{"version":3,"file":"build-styles.mjs","sources":["../../../../../src/render/html/utils/build-styles.ts"],"sourcesContent":["import {\n getValueAsType,\n isCSSVariableName,\n numberValueTypes,\n transformProps,\n} from \"motion-dom\"\nimport { MotionProps } from \"../../../motion/types\"\nimport { ResolvedValues } from \"../../types\"\nimport { HTMLRenderState } from \"../types\"\nimport { buildTransform } from \"./build-transform\"\n\nexport function buildHTMLStyles(\n state: HTMLRenderState,\n latestValues: ResolvedValues,\n transformTemplate?: MotionProps[\"transformTemplate\"]\n) {\n const { style, vars, transformOrigin } = state\n\n // Track whether we encounter any transform or transformOrigin values.\n let hasTransform = false\n let hasTransformOrigin = false\n\n /**\n * Loop over all our latest animated values and decide whether to handle them\n * as a style or CSS variable.\n *\n * Transforms and transform origins are kept separately for further processing.\n */\n for (const key in latestValues) {\n const value = latestValues[key]\n\n if (transformProps.has(key)) {\n // If this is a transform, flag to enable further transform processing\n hasTransform = true\n continue\n } else if (isCSSVariableName(key)) {\n vars[key] = value\n continue\n } else {\n // Convert the value to its default value type, ie 0 -> \"0px\"\n const valueAsType = getValueAsType(value, numberValueTypes[key])\n\n if (key.startsWith(\"origin\")) {\n // If this is a transform origin, flag and enable further transform-origin processing\n hasTransformOrigin = true\n transformOrigin[key as keyof typeof transformOrigin] =\n valueAsType\n } else {\n style[key] = valueAsType\n }\n }\n }\n\n if (!latestValues.transform) {\n if (hasTransform || transformTemplate) {\n style.transform = buildTransform(\n latestValues,\n state.transform,\n transformTemplate\n )\n } else if (style.transform) {\n /**\n * If we have previously created a transform but currently don't have any,\n * reset transform style to none.\n */\n style.transform = \"none\"\n }\n }\n\n /**\n * Build a transformOrigin style. Uses the same defaults as the browser for\n * undefined origins.\n */\n if (hasTransformOrigin) {\n const {\n originX = \"50%\",\n originY = \"50%\",\n originZ = 0,\n } = transformOrigin\n style.transformOrigin = `${originX} ${originY} ${originZ}`\n }\n}\n"],"names":[],"mappings":";;;SAWgB,eAAe,CAC3B,KAAsB,EACtB,YAA4B,EAC5B,iBAAoD,EAAA;IAEpD,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,eAAe,EAAE,GAAG,KAAK,CAAA;;IAG9C,IAAI,YAAY,GAAG,KAAK,CAAA;IACxB,IAAI,kBAAkB,GAAG,KAAK,CAAA;AAE9B;;;;;AAKG;AACH,IAAA,KAAK,MAAM,GAAG,IAAI,YAAY,EAAE;AAC5B,QAAA,MAAM,KAAK,GAAG,YAAY,CAAC,GAAG,CAAC,CAAA;AAE/B,QAAA,IAAI,cAAc,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;;YAEzB,YAAY,GAAG,IAAI,CAAA;YACnB,SAAQ;SACX;AAAM,aAAA,IAAI,iBAAiB,CAAC,GAAG,CAAC,EAAE;AAC/B,YAAA,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA;YACjB,SAAQ;SACX;aAAM;;YAEH,MAAM,WAAW,GAAG,cAAc,CAAC,KAAK,EAAE,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAA;AAEhE,YAAA,IAAI,GAAG,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE;;gBAE1B,kBAAkB,GAAG,IAAI,CAAA;gBACzB,eAAe,CAAC,GAAmC,CAAC;AAChD,oBAAA,WAAW,CAAA;aAClB;iBAAM;AACH,gBAAA,KAAK,CAAC,GAAG,CAAC,GAAG,WAAW,CAAA;aAC3B;SACJ;KACJ;AAED,IAAA,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE;AACzB,QAAA,IAAI,YAAY,IAAI,iBAAiB,EAAE;AACnC,YAAA,KAAK,CAAC,SAAS,GAAG,cAAc,CAC5B,YAAY,EACZ,KAAK,CAAC,SAAS,EACf,iBAAiB,CACpB,CAAA;SACJ;AAAM,aAAA,IAAI,KAAK,CAAC,SAAS,EAAE;AACxB;;;AAGG;AACH,YAAA,KAAK,CAAC,SAAS,GAAG,MAAM,CAAA;SAC3B;KACJ;AAED;;;AAGG;IACH,IAAI,kBAAkB,EAAE;AACpB,QAAA,MAAM,EACF,OAAO,GAAG,KAAK,EACf,OAAO,GAAG,KAAK,EACf,OAAO,GAAG,CAAC,GACd,GAAG,eAAe,CAAA;QACnB,KAAK,CAAC,eAAe,GAAG,CAAG,EAAA,OAAO,IAAI,OAAO,CAAA,CAAA,EAAI,OAAO,CAAA,CAAE,CAAA;KAC7D;AACL;;;;"}