@tamagui/animations-css 1.74.10 → 1.74.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/cjs/createAnimations.js +6 -35
  2. package/dist/cjs/createAnimations.js.map +1 -1
  3. package/dist/cjs/createAnimations.native.js +6 -35
  4. package/dist/cjs/createAnimations.native.js.map +1 -1
  5. package/dist/esm/createAnimations.js +6 -35
  6. package/dist/esm/createAnimations.js.map +1 -1
  7. package/dist/esm/createAnimations.native.js +6 -35
  8. package/dist/esm/createAnimations.native.js.map +1 -1
  9. package/package.json +5 -5
  10. package/src/createAnimations.tsx +65 -62
  11. package/types/createAnimations.d.ts.map +1 -1
package/dist/cjs/createAnimations.js CHANGED
@@ -17,7 +17,7 @@ __export(createAnimations_exports, {
17
17
  createAnimations: () => createAnimations
18
18
  });
19
19
  module.exports = __toCommonJS(createAnimations_exports);
20
- var import_core = require("@tamagui/core"), import_cubic_bezier_animator = require("@tamagui/cubic-bezier-animator"), import_use_presence = require("@tamagui/use-presence"), import_react = require("react");
20
+ var import_core = require("@tamagui/core"), import_use_presence = require("@tamagui/use-presence"), import_react = require("react");
21
21
  function createAnimations(animations) {
22
22
  return {
23
23
  View: import_core.Stack,
@@ -57,7 +57,7 @@ function createAnimations(animations) {
57
57
  return getStyle(val.getValue());
58
58
  },
59
59
  useAnimations: ({ props, presence, style, componentState, hostRef }) => {
60
- const isEntering = !!componentState.unmounted, isExiting = (presence == null ? void 0 : presence[0]) === !1, sendExitComplete = presence == null ? void 0 : presence[1], initialPositionRef = (0, import_react.useRef)(null), animationKey = Array.isArray(props.animation) ? props.animation[0] : props.animation, animation = animations[animationKey], keys = props.animateOnly ? props.animateOnly.join(" ") : "all";
60
+ const isEntering = !!componentState.unmounted, isExiting = (presence == null ? void 0 : presence[0]) === !1, sendExitComplete = presence == null ? void 0 : presence[1], [animationKey, animationConfig] = [].concat(props.animation), animation = animations[animationKey], keys = props.animateOnly ?? ["all"];
61
61
  return (0, import_core.useIsomorphicLayoutEffect)(() => {
62
62
  if (!sendExitComplete || !isExiting || !hostRef.current)
63
63
  return;
@@ -67,42 +67,13 @@ function createAnimations(animations) {
67
67
  return node.addEventListener("transitionend", onFinishAnimation), node.addEventListener("transitioncancel", onFinishAnimation), () => {
68
68
  node.removeEventListener("transitionend", onFinishAnimation), node.removeEventListener("transitioncancel", onFinishAnimation);
69
69
  };
70
- }, [sendExitComplete, isExiting]), (0, import_core.useIsomorphicLayoutEffect)(() => {
71
- var _a;
72
- if (!hostRef.current || !props.layout)
73
- return;
74
- const boundingBox = (_a = hostRef.current) == null ? void 0 : _a.getBoundingClientRect();
75
- if (isChanged(initialPositionRef.current, boundingBox)) {
76
- const transform = invert(
77
- hostRef.current,
78
- boundingBox,
79
- initialPositionRef.current
80
- );
81
- (0, import_cubic_bezier_animator.animate)({
82
- from: transform,
83
- to: { x: 0, y: 0, scaleX: 1, scaleY: 1 },
84
- duration: 1e3,
85
- onUpdate: ({ x, y, scaleX, scaleY }) => {
86
- hostRef.current.style.transform = `translate(${x}px, ${y}px) scaleX(${scaleX}) scaleY(${scaleY})`;
87
- },
88
- // TODO: extract ease-in from string and convert/map it to a cubicBezier array
89
- cubicBezier: [0, 1.38, 1, -0.41]
90
- });
91
- }
92
- initialPositionRef.current = boundingBox;
93
- }), animation ? (style.transition = `${keys} ${animation}${props.layout ? ",width 0s, height 0s, margin 0s, padding 0s, transform" : ""}`, process.env.NODE_ENV === "development" && props.debug && console.log("CSS animation", style, { isEntering, isExiting }), { style }) : null;
70
+ }, [sendExitComplete, isExiting]), animation ? (style.transition = keys.map((key) => {
71
+ const override = animations[animationConfig == null ? void 0 : animationConfig[key]] ?? animation;
72
+ return `${key} ${override}`;
73
+ }).join(", "), process.env.NODE_ENV === "development" && props.debug && console.info("CSS animation", style, { isEntering, isExiting }), { style }) : null;
94
74
  }
95
75
  };
96
76
  }
97
- const isChanged = (initialBox, finalBox) => !initialBox || !finalBox ? !1 : JSON.stringify(initialBox) !== JSON.stringify(finalBox), invert = (el, from, to) => {
98
- const { x: fromX, y: fromY, width: fromWidth, height: fromHeight } = from, { x, y, width, height } = to, transform = {
99
- x: x - fromX - (fromWidth - width) / 2,
100
- y: y - fromY - (fromHeight - height) / 2,
101
- scaleX: width / fromWidth,
102
- scaleY: height / fromHeight
103
- };
104
- return el.style.transform = `translate(${transform.x}px, ${transform.y}px) scaleX(${transform.scaleX}) scaleY(${transform.scaleY})`, transform;
105
- };
106
77
  // Annotate the CommonJS export names for ESM import in node:
107
78
  0 && (module.exports = {
108
79
  createAnimations
package/dist/cjs/createAnimations.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/createAnimations.tsx"],
4
- "mappings": "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",
4
+ "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAMO,0BAEP,sBAA4B,kCAC5B,eAAiC;AAE1B,SAAS,iBAAmC,YAAmC;AACpF,SAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,IAEjB,kBAAkB,SAA0C;AAC1D,YAAM,CAAC,KAAK,MAAM,QAAI,uBAAS,OAAO;AAEtC,aAAO;AAAA,QACL,cAAc;AACZ,iBAAO;AAAA,QACT;AAAA,QACA,WAAW;AACT,iBAAO;AAAA,QACT;AAAA,QACA,SAAS,MAAM;AACb,iBAAO,IAAI;AAAA,QACb;AAAA,QACA,OAAO;AAAA,QAAC;AAAA,MACV;AAAA,IACF;AAAA,IAEA,0BAA0B,EAAE,SAAS,MAAM,GAAG,SAAS;AAErD,iDAA0B,MAAM;AAC9B,YAAI,CAAC,QAAQ;AAAS;AACtB,cAAM,oBAAoB,CAAC,MAAuB;AAChD,kBAAQ,MAAM,SAAS,CAAC;AAAA,QAC1B,GAEM,OAAO,QAAQ;AACrB,oBAAK,iBAAiB,mBAAmB,iBAAiB,GAC1D,KAAK,iBAAiB,oBAAoB,iBAAiB,GAC3D,KAAK,iBAAiB,iBAAiB,iBAAiB,GACjD,MAAM;AACX,eAAK,oBAAoB,mBAAmB,iBAAiB,GAC7D,KAAK,oBAAoB,oBAAoB,iBAAiB,GAC9D,KAAK,oBAAoB,iBAAiB,iBAAiB;AAAA,QAC7D;AAAA,MACF,GAAG,CAAC,SAAS,OAAO,CAAC;AAAA,IACvB;AAAA,IAEA,uBAAuB,KAAK,UAAU;AACpC,aAAO,SAAS,IAAI,SAAS,CAAC;AAAA,IAChC;AAAA,IAEA,eAAe,CAAC,EAAE,OAAO,UAAU,OAAO,gBAAgB,QAAQ,MAAM;AACtE,YAAM,aAAa,CAAC,CAAC,eAAe,WAC9B,aAAY,qCAAW,QAAO,IAC9B,mBAAmB,qCAAW,IAE9B,CAAC,cAAc,eAAe,IAAI,CAAC,EAAE,OAAO,MAAM,SAAS,GAC3D,YAAY,WAAW,YAAY,GACnC,OAAO,MAAM,eAAe,CAAC,KAAK;AAiDxC,iBA/CA,uCAA0B,MAAM;AAC9B,YAAI,CAAC,oBAAoB,CAAC,aAAa,CAAC,QAAQ;AAAS;AACzD,cAAM,OAAO,QAAQ,SACf,oBAAoB,MAAM;AAC9B;AAAA,QACF;AACA,oBAAK,iBAAiB,iBAAiB,iBAAiB,GACxD,KAAK,iBAAiB,oBAAoB,iBAAiB,GACpD,MAAM;AACX,eAAK,oBAAoB,iBAAiB,iBAAiB,GAC3D,KAAK,oBAAoB,oBAAoB,iBAAiB;AAAA,QAChE;AAAA,MACF,GAAG,CAAC,kBAAkB,SAAS,CAAC,GAmC3B,aAOL,MAAM,aAAa,KAChB,IAAI,CAAC,QAAQ;AACZ,cAAM,WAAW,WAAW,mDAAkB,IAAI,KAAK;AACvD,eAAO,GAAG,GAAG,IAAI,QAAQ;AAAA,MAC3B,CAAC,EACA,KAAK,IAAI,GAMR,QAAQ,IAAI,aAAa,iBAAiB,MAAM,SAClD,QAAQ,KAAK,iBAAiB,OAAO,EAAE,YAAY,UAAU,CAAC,GAGzD,EAAE,MAAM,KArBN;AAAA,IAsBX;AAAA,EACF;AACF;",
5
5
  "names": []
6
6
  }
package/dist/cjs/createAnimations.native.js CHANGED
@@ -18,7 +18,7 @@ __export(createAnimations_exports, {
18
18
  createAnimations: () => createAnimations
19
19
  });
20
20
  module.exports = __toCommonJS(createAnimations_exports);
21
- var import_core = require("@tamagui/core"), import_cubic_bezier_animator = require("@tamagui/cubic-bezier-animator"), import_use_presence = require("@tamagui/use-presence"), import_react = require("react");
21
+ var import_core = require("@tamagui/core"), import_use_presence = require("@tamagui/use-presence"), import_react = require("react");
22
22
  function createAnimations(animations) {
23
23
  return {
24
24
  View: import_core.Stack,
@@ -58,7 +58,7 @@ function createAnimations(animations) {
58
58
  return getStyle(val.getValue());
59
59
  },
60
60
  useAnimations: ({ props, presence, style, componentState, hostRef }) => {
61
- const isEntering = !!componentState.unmounted, isExiting = (presence == null ? void 0 : presence[0]) === !1, sendExitComplete = presence == null ? void 0 : presence[1], initialPositionRef = (0, import_react.useRef)(null), animationKey = Array.isArray(props.animation) ? props.animation[0] : props.animation, animation = animations[animationKey], keys = props.animateOnly ? props.animateOnly.join(" ") : "all";
61
+ const isEntering = !!componentState.unmounted, isExiting = (presence == null ? void 0 : presence[0]) === !1, sendExitComplete = presence == null ? void 0 : presence[1], [animationKey, animationConfig] = [].concat(props.animation), animation = animations[animationKey], keys = props.animateOnly ?? ["all"];
62
62
  return (0, import_core.useIsomorphicLayoutEffect)(() => {
63
63
  if (!sendExitComplete || !isExiting || !hostRef.current)
64
64
  return;
@@ -68,42 +68,13 @@ function createAnimations(animations) {
68
68
  return node.addEventListener("transitionend", onFinishAnimation), node.addEventListener("transitioncancel", onFinishAnimation), () => {
69
69
  node.removeEventListener("transitionend", onFinishAnimation), node.removeEventListener("transitioncancel", onFinishAnimation);
70
70
  };
71
- }, [sendExitComplete, isExiting]), (0, import_core.useIsomorphicLayoutEffect)(() => {
72
- var _a;
73
- if (!hostRef.current || !props.layout)
74
- return;
75
- const boundingBox = (_a = hostRef.current) == null ? void 0 : _a.getBoundingClientRect();
76
- if (isChanged(initialPositionRef.current, boundingBox)) {
77
- const transform = invert(
78
- hostRef.current,
79
- boundingBox,
80
- initialPositionRef.current
81
- );
82
- (0, import_cubic_bezier_animator.animate)({
83
- from: transform,
84
- to: { x: 0, y: 0, scaleX: 1, scaleY: 1 },
85
- duration: 1e3,
86
- onUpdate: ({ x, y, scaleX, scaleY }) => {
87
- hostRef.current.style.transform = `translate(${x}px, ${y}px) scaleX(${scaleX}) scaleY(${scaleY})`;
88
- },
89
- // TODO: extract ease-in from string and convert/map it to a cubicBezier array
90
- cubicBezier: [0, 1.38, 1, -0.41]
91
- });
92
- }
93
- initialPositionRef.current = boundingBox;
94
- }), animation ? (style.transition = `${keys} ${animation}${props.layout ? ",width 0s, height 0s, margin 0s, padding 0s, transform" : ""}`, process.env.NODE_ENV === "development" && props.debug && console.log("CSS animation", style, { isEntering, isExiting }), { style }) : null;
71
+ }, [sendExitComplete, isExiting]), animation ? (style.transition = keys.map((key) => {
72
+ const override = animations[animationConfig == null ? void 0 : animationConfig[key]] ?? animation;
73
+ return `${key} ${override}`;
74
+ }).join(", "), process.env.NODE_ENV === "development" && props.debug && console.info("CSS animation", style, { isEntering, isExiting }), { style }) : null;
95
75
  }
96
76
  };
97
77
  }
98
- const isChanged = (initialBox, finalBox) => !initialBox || !finalBox ? !1 : JSON.stringify(initialBox) !== JSON.stringify(finalBox), invert = (el, from, to) => {
99
- const { x: fromX, y: fromY, width: fromWidth, height: fromHeight } = from, { x, y, width, height } = to, transform = {
100
- x: x - fromX - (fromWidth - width) / 2,
101
- y: y - fromY - (fromHeight - height) / 2,
102
- scaleX: width / fromWidth,
103
- scaleY: height / fromHeight
104
- };
105
- return el.style.transform = `translate(${transform.x}px, ${transform.y}px) scaleX(${transform.scaleX}) scaleY(${transform.scaleY})`, transform;
106
- };
107
78
  // Annotate the CommonJS export names for ESM import in node:
108
79
  0 && (module.exports = {
109
80
  createAnimations
package/dist/cjs/createAnimations.native.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/createAnimations.tsx"],
4
- "mappings": "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",
4
+ "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAMO,0BAEP,sBAA4B,kCAC5B,eAAiC;AAE1B,SAAS,iBAAmC,YAAmC;AACpF,SAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,IAEjB,kBAAkB,SAA0C;AAC1D,YAAM,CAAC,KAAK,MAAM,QAAI,uBAAS,OAAO;AAEtC,aAAO;AAAA,QACL,cAAc;AACZ,iBAAO;AAAA,QACT;AAAA,QACA,WAAW;AACT,iBAAO;AAAA,QACT;AAAA,QACA,SAAS,MAAM;AACb,iBAAO,IAAI;AAAA,QACb;AAAA,QACA,OAAO;AAAA,QAAC;AAAA,MACV;AAAA,IACF;AAAA,IAEA,0BAA0B,EAAE,SAAS,MAAM,GAAG,SAAS;AAErD,iDAA0B,MAAM;AAC9B,YAAI,CAAC,QAAQ;AAAS;AACtB,cAAM,oBAAoB,CAAC,MAAuB;AAChD,kBAAQ,MAAM,SAAS,CAAC;AAAA,QAC1B,GAEM,OAAO,QAAQ;AACrB,oBAAK,iBAAiB,mBAAmB,iBAAiB,GAC1D,KAAK,iBAAiB,oBAAoB,iBAAiB,GAC3D,KAAK,iBAAiB,iBAAiB,iBAAiB,GACjD,MAAM;AACX,eAAK,oBAAoB,mBAAmB,iBAAiB,GAC7D,KAAK,oBAAoB,oBAAoB,iBAAiB,GAC9D,KAAK,oBAAoB,iBAAiB,iBAAiB;AAAA,QAC7D;AAAA,MACF,GAAG,CAAC,SAAS,OAAO,CAAC;AAAA,IACvB;AAAA,IAEA,uBAAuB,KAAK,UAAU;AACpC,aAAO,SAAS,IAAI,SAAS,CAAC;AAAA,IAChC;AAAA,IAEA,eAAe,CAAC,EAAE,OAAO,UAAU,OAAO,gBAAgB,QAAQ,MAAM;AACtE,YAAM,aAAa,CAAC,CAAC,eAAe,WAC9B,aAAY,qCAAW,QAAO,IAC9B,mBAAmB,qCAAW,IAE9B,CAAC,cAAc,eAAe,IAAI,CAAC,EAAE,OAAO,MAAM,SAAS,GAC3D,YAAY,WAAW,YAAY,GACnC,OAAO,MAAM,eAAe,CAAC,KAAK;AAiDxC,iBA/CA,uCAA0B,MAAM;AAC9B,YAAI,CAAC,oBAAoB,CAAC,aAAa,CAAC,QAAQ;AAAS;AACzD,cAAM,OAAO,QAAQ,SACf,oBAAoB,MAAM;AAC9B;AAAA,QACF;AACA,oBAAK,iBAAiB,iBAAiB,iBAAiB,GACxD,KAAK,iBAAiB,oBAAoB,iBAAiB,GACpD,MAAM;AACX,eAAK,oBAAoB,iBAAiB,iBAAiB,GAC3D,KAAK,oBAAoB,oBAAoB,iBAAiB;AAAA,QAChE;AAAA,MACF,GAAG,CAAC,kBAAkB,SAAS,CAAC,GAmC3B,aAOL,MAAM,aAAa,KAChB,IAAI,CAAC,QAAQ;AACZ,cAAM,WAAW,WAAW,mDAAkB,IAAI,KAAK;AACvD,eAAO,GAAG,GAAG,IAAI,QAAQ;AAAA,MAC3B,CAAC,EACA,KAAK,IAAI,GAMR,QAAQ,IAAI,aAAa,iBAAiB,MAAM,SAClD,QAAQ,KAAK,iBAAiB,OAAO,EAAE,YAAY,UAAU,CAAC,GAGzD,EAAE,MAAM,KArBN;AAAA,IAsBX;AAAA,EACF;AACF;",
5
5
  "names": []
6
6
  }
package/dist/esm/createAnimations.js CHANGED
@@ -3,9 +3,8 @@ import {
3
3
  Text,
4
4
  useIsomorphicLayoutEffect
5
5
  } from "@tamagui/core";
6
- import { animate } from "@tamagui/cubic-bezier-animator";
7
6
  import { usePresence } from "@tamagui/use-presence";
8
- import { useRef, useState } from "react";
7
+ import { useState } from "react";
9
8
  function createAnimations(animations) {
10
9
  return {
11
10
  View: Stack,
@@ -45,7 +44,7 @@ function createAnimations(animations) {
45
44
  return getStyle(val.getValue());
46
45
  },
47
46
  useAnimations: ({ props, presence, style, componentState, hostRef }) => {
48
- const isEntering = !!componentState.unmounted, isExiting = presence?.[0] === !1, sendExitComplete = presence?.[1], initialPositionRef = useRef(null), animationKey = Array.isArray(props.animation) ? props.animation[0] : props.animation, animation = animations[animationKey], keys = props.animateOnly ? props.animateOnly.join(" ") : "all";
47
+ const isEntering = !!componentState.unmounted, isExiting = presence?.[0] === !1, sendExitComplete = presence?.[1], [animationKey, animationConfig] = [].concat(props.animation), animation = animations[animationKey], keys = props.animateOnly ?? ["all"];
49
48
  return useIsomorphicLayoutEffect(() => {
50
49
  if (!sendExitComplete || !isExiting || !hostRef.current)
51
50
  return;
@@ -55,41 +54,13 @@ function createAnimations(animations) {
55
54
  return node.addEventListener("transitionend", onFinishAnimation), node.addEventListener("transitioncancel", onFinishAnimation), () => {
56
55
  node.removeEventListener("transitionend", onFinishAnimation), node.removeEventListener("transitioncancel", onFinishAnimation);
57
56
  };
58
- }, [sendExitComplete, isExiting]), useIsomorphicLayoutEffect(() => {
59
- if (!hostRef.current || !props.layout)
60
- return;
61
- const boundingBox = hostRef.current?.getBoundingClientRect();
62
- if (isChanged(initialPositionRef.current, boundingBox)) {
63
- const transform = invert(
64
- hostRef.current,
65
- boundingBox,
66
- initialPositionRef.current
67
- );
68
- animate({
69
- from: transform,
70
- to: { x: 0, y: 0, scaleX: 1, scaleY: 1 },
71
- duration: 1e3,
72
- onUpdate: ({ x, y, scaleX, scaleY }) => {
73
- hostRef.current.style.transform = `translate(${x}px, ${y}px) scaleX(${scaleX}) scaleY(${scaleY})`;
74
- },
75
- // TODO: extract ease-in from string and convert/map it to a cubicBezier array
76
- cubicBezier: [0, 1.38, 1, -0.41]
77
- });
78
- }
79
- initialPositionRef.current = boundingBox;
80
- }), animation ? (style.transition = `${keys} ${animation}${props.layout ? ",width 0s, height 0s, margin 0s, padding 0s, transform" : ""}`, process.env.NODE_ENV === "development" && props.debug && console.log("CSS animation", style, { isEntering, isExiting }), { style }) : null;
57
+ }, [sendExitComplete, isExiting]), animation ? (style.transition = keys.map((key) => {
58
+ const override = animations[animationConfig?.[key]] ?? animation;
59
+ return `${key} ${override}`;
60
+ }).join(", "), process.env.NODE_ENV === "development" && props.debug && console.info("CSS animation", style, { isEntering, isExiting }), { style }) : null;
81
61
  }
82
62
  };
83
63
  }
84
- const isChanged = (initialBox, finalBox) => !initialBox || !finalBox ? !1 : JSON.stringify(initialBox) !== JSON.stringify(finalBox), invert = (el, from, to) => {
85
- const { x: fromX, y: fromY, width: fromWidth, height: fromHeight } = from, { x, y, width, height } = to, transform = {
86
- x: x - fromX - (fromWidth - width) / 2,
87
- y: y - fromY - (fromHeight - height) / 2,
88
- scaleX: width / fromWidth,
89
- scaleY: height / fromHeight
90
- };
91
- return el.style.transform = `translate(${transform.x}px, ${transform.y}px) scaleX(${transform.scaleX}) scaleY(${transform.scaleY})`, transform;
92
- };
93
64
  export {
94
65
  createAnimations
95
66
  };
package/dist/esm/createAnimations.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/createAnimations.tsx"],
4
- "mappings": "AAAA;AAAA,EAEE;AAAA,EACA;AAAA,EAEA;AAAA,OACK;AACP,SAAS,eAAe;AACxB,SAAS,mBAAmB;AAC5B,SAAS,QAAQ,gBAAgB;AAE1B,SAAS,iBAAmC,YAAmC;AACpF,SAAO;AAAA,IACL,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,IAEjB,kBAAkB,SAA0C;AAC1D,YAAM,CAAC,KAAK,MAAM,IAAI,SAAS,OAAO;AAEtC,aAAO;AAAA,QACL,cAAc;AACZ,iBAAO;AAAA,QACT;AAAA,QACA,WAAW;AACT,iBAAO;AAAA,QACT;AAAA,QACA,SAAS,MAAM;AACb,iBAAO,IAAI;AAAA,QACb;AAAA,QACA,OAAO;AAAA,QAAC;AAAA,MACV;AAAA,IACF;AAAA,IAEA,0BAA0B,EAAE,SAAS,MAAM,GAAG,SAAS;AAErD,gCAA0B,MAAM;AAC9B,YAAI,CAAC,QAAQ;AAAS;AACtB,cAAM,oBAAoB,CAAC,MAAuB;AAChD,kBAAQ,MAAM,SAAS,CAAC;AAAA,QAC1B,GAEM,OAAO,QAAQ;AACrB,oBAAK,iBAAiB,mBAAmB,iBAAiB,GAC1D,KAAK,iBAAiB,oBAAoB,iBAAiB,GAC3D,KAAK,iBAAiB,iBAAiB,iBAAiB,GACjD,MAAM;AACX,eAAK,oBAAoB,mBAAmB,iBAAiB,GAC7D,KAAK,oBAAoB,oBAAoB,iBAAiB,GAC9D,KAAK,oBAAoB,iBAAiB,iBAAiB;AAAA,QAC7D;AAAA,MACF,GAAG,CAAC,SAAS,OAAO,CAAC;AAAA,IACvB;AAAA,IAEA,uBAAuB,KAAK,UAAU;AACpC,aAAO,SAAS,IAAI,SAAS,CAAC;AAAA,IAChC;AAAA,IAEA,eAAe,CAAC,EAAE,OAAO,UAAU,OAAO,gBAAgB,QAAQ,MAAM;AACtE,YAAM,aAAa,CAAC,CAAC,eAAe,WAC9B,YAAY,WAAW,CAAC,MAAM,IAC9B,mBAAmB,WAAW,CAAC,GAC/B,qBAAqB,OAAY,IAAI,GACrC,eAAe,MAAM,QAAQ,MAAM,SAAS,IAC9C,MAAM,UAAU,CAAC,IACjB,MAAM,WACJ,YAAY,WAAW,YAAmB,GAE1C,OAAO,MAAM,cAAc,MAAM,YAAY,KAAK,GAAG,IAAI;AAiD/D,aA/CA,0BAA0B,MAAM;AAC9B,YAAI,CAAC,oBAAoB,CAAC,aAAa,CAAC,QAAQ;AAAS;AACzD,cAAM,OAAO,QAAQ,SACf,oBAAoB,MAAM;AAC9B,6BAAmB;AAAA,QACrB;AACA,oBAAK,iBAAiB,iBAAiB,iBAAiB,GACxD,KAAK,iBAAiB,oBAAoB,iBAAiB,GACpD,MAAM;AACX,eAAK,oBAAoB,iBAAiB,iBAAiB,GAC3D,KAAK,oBAAoB,oBAAoB,iBAAiB;AAAA,QAChE;AAAA,MACF,GAAG,CAAC,kBAAkB,SAAS,CAAC,GAGhC,0BAA0B,MAAM;AAC9B,YAAI,CAAC,QAAQ,WAAW,CAAC,MAAM;AAC7B;AAGF,cAAM,cAAc,QAAQ,SAAS,sBAAsB;AAC3D,YAAI,UAAU,mBAAmB,SAAS,WAAW,GAAG;AACtD,gBAAM,YAAY;AAAA,YAChB,QAAQ;AAAA,YACR;AAAA,YACA,mBAAmB;AAAA,UACrB;AAEA,kBAAQ;AAAA,YACN,MAAM;AAAA,YACN,IAAI,EAAE,GAAG,GAAG,GAAG,GAAG,QAAQ,GAAG,QAAQ,EAAE;AAAA,YACvC,UAAU;AAAA,YACV,UAAU,CAAC,EAAE,GAAG,GAAG,QAAQ,OAAO,MAAM;AAEtC,sBAAQ,QAAQ,MAAM,YAAY,aAAa,CAAC,OAAO,CAAC,cAAc,MAAM,YAAY,MAAM;AAAA,YAKhG;AAAA;AAAA,YAEA,aAAa,CAAC,GAAG,MAAM,GAAG,KAAK;AAAA,UACjC,CAAC;AAAA,QACH;AACA,2BAAmB,UAAU;AAAA,MAC/B,CAAC,GAEI,aAOL,MAAM,aAAa,GAAG,IAAI,IAAI,SAAS,GACrC,MAAM,SAAS,2DAA2D,EAC5E,IAEI,QAAQ,IAAI,aAAa,iBAAiB,MAAM,SAElD,QAAQ,IAAI,iBAAiB,OAAO,EAAE,YAAY,UAAU,CAAC,GAGxD,EAAE,MAAM,KAfN;AAAA,IAgBX;AAAA,EACF;AACF;AAEA,MAAM,YAAY,CAAC,YAAiB,aAE9B,CAAC,cAAc,CAAC,WAAiB,KAG9B,KAAK,UAAU,UAAU,MAAM,KAAK,UAAU,QAAQ,GAGzD,SAAS,CAAC,IAAI,MAAM,OAAO;AAC/B,QAAM,EAAE,GAAG,OAAO,GAAG,OAAO,OAAO,WAAW,QAAQ,WAAW,IAAI,MAC/D,EAAE,GAAG,GAAG,OAAO,OAAO,IAAI,IAE1B,YAAY;AAAA,IAChB,GAAG,IAAI,SAAS,YAAY,SAAS;AAAA,IACrC,GAAG,IAAI,SAAS,aAAa,UAAU;AAAA,IACvC,QAAQ,QAAQ;AAAA,IAChB,QAAQ,SAAS;AAAA,EACnB;AAEA,YAAG,MAAM,YAAY,aAAa,UAAU,CAAC,OAAO,UAAU,CAAC,cAAc,UAAU,MAAM,YAAY,UAAU,MAAM,KAElH;AACT;",
4
+ "mappings": "AAAA;AAAA,EAEE;AAAA,EACA;AAAA,EAEA;AAAA,OACK;AAEP,SAAS,mBAAmB;AAC5B,SAAiB,gBAAgB;AAE1B,SAAS,iBAAmC,YAAmC;AACpF,SAAO;AAAA,IACL,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,IAEjB,kBAAkB,SAA0C;AAC1D,YAAM,CAAC,KAAK,MAAM,IAAI,SAAS,OAAO;AAEtC,aAAO;AAAA,QACL,cAAc;AACZ,iBAAO;AAAA,QACT;AAAA,QACA,WAAW;AACT,iBAAO;AAAA,QACT;AAAA,QACA,SAAS,MAAM;AACb,iBAAO,IAAI;AAAA,QACb;AAAA,QACA,OAAO;AAAA,QAAC;AAAA,MACV;AAAA,IACF;AAAA,IAEA,0BAA0B,EAAE,SAAS,MAAM,GAAG,SAAS;AAErD,gCAA0B,MAAM;AAC9B,YAAI,CAAC,QAAQ;AAAS;AACtB,cAAM,oBAAoB,CAAC,MAAuB;AAChD,kBAAQ,MAAM,SAAS,CAAC;AAAA,QAC1B,GAEM,OAAO,QAAQ;AACrB,oBAAK,iBAAiB,mBAAmB,iBAAiB,GAC1D,KAAK,iBAAiB,oBAAoB,iBAAiB,GAC3D,KAAK,iBAAiB,iBAAiB,iBAAiB,GACjD,MAAM;AACX,eAAK,oBAAoB,mBAAmB,iBAAiB,GAC7D,KAAK,oBAAoB,oBAAoB,iBAAiB,GAC9D,KAAK,oBAAoB,iBAAiB,iBAAiB;AAAA,QAC7D;AAAA,MACF,GAAG,CAAC,SAAS,OAAO,CAAC;AAAA,IACvB;AAAA,IAEA,uBAAuB,KAAK,UAAU;AACpC,aAAO,SAAS,IAAI,SAAS,CAAC;AAAA,IAChC;AAAA,IAEA,eAAe,CAAC,EAAE,OAAO,UAAU,OAAO,gBAAgB,QAAQ,MAAM;AACtE,YAAM,aAAa,CAAC,CAAC,eAAe,WAC9B,YAAY,WAAW,CAAC,MAAM,IAC9B,mBAAmB,WAAW,CAAC,GAE/B,CAAC,cAAc,eAAe,IAAI,CAAC,EAAE,OAAO,MAAM,SAAS,GAC3D,YAAY,WAAW,YAAY,GACnC,OAAO,MAAM,eAAe,CAAC,KAAK;AAiDxC,aA/CA,0BAA0B,MAAM;AAC9B,YAAI,CAAC,oBAAoB,CAAC,aAAa,CAAC,QAAQ;AAAS;AACzD,cAAM,OAAO,QAAQ,SACf,oBAAoB,MAAM;AAC9B,6BAAmB;AAAA,QACrB;AACA,oBAAK,iBAAiB,iBAAiB,iBAAiB,GACxD,KAAK,iBAAiB,oBAAoB,iBAAiB,GACpD,MAAM;AACX,eAAK,oBAAoB,iBAAiB,iBAAiB,GAC3D,KAAK,oBAAoB,oBAAoB,iBAAiB;AAAA,QAChE;AAAA,MACF,GAAG,CAAC,kBAAkB,SAAS,CAAC,GAmC3B,aAOL,MAAM,aAAa,KAChB,IAAI,CAAC,QAAQ;AACZ,cAAM,WAAW,WAAW,kBAAkB,GAAG,CAAC,KAAK;AACvD,eAAO,GAAG,GAAG,IAAI,QAAQ;AAAA,MAC3B,CAAC,EACA,KAAK,IAAI,GAMR,QAAQ,IAAI,aAAa,iBAAiB,MAAM,SAClD,QAAQ,KAAK,iBAAiB,OAAO,EAAE,YAAY,UAAU,CAAC,GAGzD,EAAE,MAAM,KArBN;AAAA,IAsBX;AAAA,EACF;AACF;",
5
5
  "names": []
6
6
  }
package/dist/esm/createAnimations.native.js CHANGED
@@ -3,9 +3,8 @@ import {
3
3
  Text,
4
4
  useIsomorphicLayoutEffect
5
5
  } from "@tamagui/core";
6
- import { animate } from "@tamagui/cubic-bezier-animator";
7
6
  import { usePresence } from "@tamagui/use-presence";
8
- import { useRef, useState } from "react";
7
+ import { useState } from "react";
9
8
  function createAnimations(animations) {
10
9
  return {
11
10
  View: Stack,
@@ -45,7 +44,7 @@ function createAnimations(animations) {
45
44
  return getStyle(val.getValue());
46
45
  },
47
46
  useAnimations: ({ props, presence, style, componentState, hostRef }) => {
48
- const isEntering = !!componentState.unmounted, isExiting = presence?.[0] === !1, sendExitComplete = presence?.[1], initialPositionRef = useRef(null), animationKey = Array.isArray(props.animation) ? props.animation[0] : props.animation, animation = animations[animationKey], keys = props.animateOnly ? props.animateOnly.join(" ") : "all";
47
+ const isEntering = !!componentState.unmounted, isExiting = presence?.[0] === !1, sendExitComplete = presence?.[1], [animationKey, animationConfig] = [].concat(props.animation), animation = animations[animationKey], keys = props.animateOnly ?? ["all"];
49
48
  return useIsomorphicLayoutEffect(() => {
50
49
  if (!sendExitComplete || !isExiting || !hostRef.current)
51
50
  return;
@@ -55,41 +54,13 @@ function createAnimations(animations) {
55
54
  return node.addEventListener("transitionend", onFinishAnimation), node.addEventListener("transitioncancel", onFinishAnimation), () => {
56
55
  node.removeEventListener("transitionend", onFinishAnimation), node.removeEventListener("transitioncancel", onFinishAnimation);
57
56
  };
58
- }, [sendExitComplete, isExiting]), useIsomorphicLayoutEffect(() => {
59
- if (!hostRef.current || !props.layout)
60
- return;
61
- const boundingBox = hostRef.current?.getBoundingClientRect();
62
- if (isChanged(initialPositionRef.current, boundingBox)) {
63
- const transform = invert(
64
- hostRef.current,
65
- boundingBox,
66
- initialPositionRef.current
67
- );
68
- animate({
69
- from: transform,
70
- to: { x: 0, y: 0, scaleX: 1, scaleY: 1 },
71
- duration: 1e3,
72
- onUpdate: ({ x, y, scaleX, scaleY }) => {
73
- hostRef.current.style.transform = `translate(${x}px, ${y}px) scaleX(${scaleX}) scaleY(${scaleY})`;
74
- },
75
- // TODO: extract ease-in from string and convert/map it to a cubicBezier array
76
- cubicBezier: [0, 1.38, 1, -0.41]
77
- });
78
- }
79
- initialPositionRef.current = boundingBox;
80
- }), animation ? (style.transition = `${keys} ${animation}${props.layout ? ",width 0s, height 0s, margin 0s, padding 0s, transform" : ""}`, process.env.NODE_ENV === "development" && props.debug && console.log("CSS animation", style, { isEntering, isExiting }), { style }) : null;
57
+ }, [sendExitComplete, isExiting]), animation ? (style.transition = keys.map((key) => {
58
+ const override = animations[animationConfig?.[key]] ?? animation;
59
+ return `${key} ${override}`;
60
+ }).join(", "), process.env.NODE_ENV === "development" && props.debug && console.info("CSS animation", style, { isEntering, isExiting }), { style }) : null;
81
61
  }
82
62
  };
83
63
  }
84
- const isChanged = (initialBox, finalBox) => !initialBox || !finalBox ? !1 : JSON.stringify(initialBox) !== JSON.stringify(finalBox), invert = (el, from, to) => {
85
- const { x: fromX, y: fromY, width: fromWidth, height: fromHeight } = from, { x, y, width, height } = to, transform = {
86
- x: x - fromX - (fromWidth - width) / 2,
87
- y: y - fromY - (fromHeight - height) / 2,
88
- scaleX: width / fromWidth,
89
- scaleY: height / fromHeight
90
- };
91
- return el.style.transform = `translate(${transform.x}px, ${transform.y}px) scaleX(${transform.scaleX}) scaleY(${transform.scaleY})`, transform;
92
- };
93
64
  export {
94
65
  createAnimations
95
66
  };
package/dist/esm/createAnimations.native.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/createAnimations.tsx"],
4
- "mappings": "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",
4
+ "mappings": "AAAA;AAAA,EAEE;AAAA,EACA;AAAA,EAEA;AAAA,OACK;AAEP,SAAS,mBAAmB;AAC5B,SAAiB,gBAAgB;AAE1B,SAAS,iBAAmC,YAAmC;AACpF,SAAO;AAAA,IACL,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,IAEjB,kBAAkB,SAA0C;AAC1D,YAAM,CAAC,KAAK,MAAM,IAAI,SAAS,OAAO;AAEtC,aAAO;AAAA,QACL,cAAc;AACZ,iBAAO;AAAA,QACT;AAAA,QACA,WAAW;AACT,iBAAO;AAAA,QACT;AAAA,QACA,SAAS,MAAM;AACb,iBAAO,IAAI;AAAA,QACb;AAAA,QACA,OAAO;AAAA,QAAC;AAAA,MACV;AAAA,IACF;AAAA,IAEA,0BAA0B,EAAE,SAAS,MAAM,GAAG,SAAS;AAErD,gCAA0B,MAAM;AAC9B,YAAI,CAAC,QAAQ;AAAS;AACtB,cAAM,oBAAoB,CAAC,MAAuB;AAChD,kBAAQ,MAAM,SAAS,CAAC;AAAA,QAC1B,GAEM,OAAO,QAAQ;AACrB,oBAAK,iBAAiB,mBAAmB,iBAAiB,GAC1D,KAAK,iBAAiB,oBAAoB,iBAAiB,GAC3D,KAAK,iBAAiB,iBAAiB,iBAAiB,GACjD,MAAM;AACX,eAAK,oBAAoB,mBAAmB,iBAAiB,GAC7D,KAAK,oBAAoB,oBAAoB,iBAAiB,GAC9D,KAAK,oBAAoB,iBAAiB,iBAAiB;AAAA,QAC7D;AAAA,MACF,GAAG,CAAC,SAAS,OAAO,CAAC;AAAA,IACvB;AAAA,IAEA,uBAAuB,KAAK,UAAU;AACpC,aAAO,SAAS,IAAI,SAAS,CAAC;AAAA,IAChC;AAAA,IAEA,eAAe,CAAC,EAAE,OAAO,UAAU,OAAO,gBAAgB,QAAQ,MAAM;AACtE,YAAM,aAAa,CAAC,CAAC,eAAe,WAC9B,YAAY,WAAW,CAAC,MAAM,IAC9B,mBAAmB,WAAW,CAAC,GAE/B,CAAC,cAAc,eAAe,IAAI,CAAC,EAAE,OAAO,MAAM,SAAS,GAC3D,YAAY,WAAW,YAAY,GACnC,OAAO,MAAM,eAAe,CAAC,KAAK;AAiDxC,aA/CA,0BAA0B,MAAM;AAC9B,YAAI,CAAC,oBAAoB,CAAC,aAAa,CAAC,QAAQ;AAAS;AACzD,cAAM,OAAO,QAAQ,SACf,oBAAoB,MAAM;AAC9B,6BAAmB;AAAA,QACrB;AACA,oBAAK,iBAAiB,iBAAiB,iBAAiB,GACxD,KAAK,iBAAiB,oBAAoB,iBAAiB,GACpD,MAAM;AACX,eAAK,oBAAoB,iBAAiB,iBAAiB,GAC3D,KAAK,oBAAoB,oBAAoB,iBAAiB;AAAA,QAChE;AAAA,MACF,GAAG,CAAC,kBAAkB,SAAS,CAAC,GAmC3B,aAOL,MAAM,aAAa,KAChB,IAAI,CAAC,QAAQ;AACZ,cAAM,WAAW,WAAW,kBAAkB,GAAG,CAAC,KAAK;AACvD,eAAO,GAAG,GAAG,IAAI,QAAQ;AAAA,MAC3B,CAAC,EACA,KAAK,IAAI,GAMR,QAAQ,IAAI,aAAa,iBAAiB,MAAM,SAClD,QAAQ,KAAK,iBAAiB,OAAO,EAAE,YAAY,UAAU,CAAC,GAGzD,EAAE,MAAM,KArBN;AAAA,IAsBX;AAAA,EACF;AACF;",
5
5
  "names": []
6
6
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tamagui/animations-css",
3
- "version": "1.74.10",
3
+ "version": "1.74.12",
4
4
  "source": "src/index.ts",
5
5
  "sideEffects": false,
6
6
  "license": "MIT",
@@ -13,12 +13,12 @@
13
13
  "dist"
14
14
  ],
15
15
  "dependencies": {
16
- "@tamagui/cubic-bezier-animator": "1.74.10",
17
- "@tamagui/use-presence": "1.74.10",
18
- "@tamagui/web": "1.74.10"
16
+ "@tamagui/cubic-bezier-animator": "1.74.12",
17
+ "@tamagui/use-presence": "1.74.12",
18
+ "@tamagui/web": "1.74.12"
19
19
  },
20
20
  "devDependencies": {
21
- "@tamagui/build": "1.74.10"
21
+ "@tamagui/build": "1.74.12"
22
22
  },
23
23
  "scripts": {
24
24
  "build": "tamagui-build",
package/src/createAnimations.tsx CHANGED
@@ -5,7 +5,7 @@ import {
5
5
  UniversalAnimatedNumber,
6
6
  useIsomorphicLayoutEffect,
7
7
  } from '@tamagui/core'
8
- import { animate } from '@tamagui/cubic-bezier-animator'
8
+ // import { animate } from '@tamagui/cubic-bezier-animator'
9
9
  import { usePresence } from '@tamagui/use-presence'
10
10
  import { useRef, useState } from 'react'
11
11
 
@@ -62,13 +62,10 @@ export function createAnimations<A extends Object>(animations: A): AnimationDriv
62
62
  const isEntering = !!componentState.unmounted
63
63
  const isExiting = presence?.[0] === false
64
64
  const sendExitComplete = presence?.[1]
65
- const initialPositionRef = useRef<any>(null)
66
- const animationKey = Array.isArray(props.animation)
67
- ? props.animation[0]
68
- : props.animation
69
- const animation = animations[animationKey as any]
70
-
71
- const keys = props.animateOnly ? props.animateOnly.join(' ') : 'all'
65
+ // const initialPositionRef = useRef<any>(null)
66
+ const [animationKey, animationConfig] = [].concat(props.animation)
67
+ const animation = animations[animationKey]
68
+ const keys = props.animateOnly ?? ['all']
72
69
 
73
70
  useIsomorphicLayoutEffect(() => {
74
71
  if (!sendExitComplete || !isExiting || !hostRef.current) return
@@ -85,37 +82,37 @@ export function createAnimations<A extends Object>(animations: A): AnimationDriv
85
82
  }, [sendExitComplete, isExiting])
86
83
 
87
84
  // layout animations
88
- useIsomorphicLayoutEffect(() => {
89
- if (!hostRef.current || !props.layout) {
90
- return
91
- }
92
- // @ts-ignore
93
- const boundingBox = hostRef.current?.getBoundingClientRect()
94
- if (isChanged(initialPositionRef.current, boundingBox)) {
95
- const transform = invert(
96
- hostRef.current,
97
- boundingBox,
98
- initialPositionRef.current
99
- )
100
-
101
- animate({
102
- from: transform,
103
- to: { x: 0, y: 0, scaleX: 1, scaleY: 1 },
104
- duration: 1000,
105
- onUpdate: ({ x, y, scaleX, scaleY }) => {
106
- // @ts-ignore
107
- hostRef.current.style.transform = `translate(${x}px, ${y}px) scaleX(${scaleX}) scaleY(${scaleY})`
108
- // TODO: handle childRef inverse scale
109
- // childRef.current.style.transform = `scaleX(${1 / scaleX}) scaleY(${
110
- // 1 / scaleY
111
- // })`
112
- },
113
- // TODO: extract ease-in from string and convert/map it to a cubicBezier array
114
- cubicBezier: [0, 1.38, 1, -0.41],
115
- })
116
- }
117
- initialPositionRef.current = boundingBox
118
- })
85
+ // useIsomorphicLayoutEffect(() => {
86
+ // if (!hostRef.current || !props.layout) {
87
+ // return
88
+ // }
89
+ // // @ts-ignore
90
+ // const boundingBox = hostRef.current?.getBoundingClientRect()
91
+ // if (isChanged(initialPositionRef.current, boundingBox)) {
92
+ // const transform = invert(
93
+ // hostRef.current,
94
+ // boundingBox,
95
+ // initialPositionRef.current
96
+ // )
97
+
98
+ // animate({
99
+ // from: transform,
100
+ // to: { x: 0, y: 0, scaleX: 1, scaleY: 1 },
101
+ // duration: 1000,
102
+ // onUpdate: ({ x, y, scaleX, scaleY }) => {
103
+ // // @ts-ignore
104
+ // hostRef.current.style.transform = `translate(${x}px, ${y}px) scaleX(${scaleX}) scaleY(${scaleY})`
105
+ // // TODO: handle childRef inverse scale
106
+ // // childRef.current.style.transform = `scaleX(${1 / scaleX}) scaleY(${
107
+ // // 1 / scaleY
108
+ // // })`
109
+ // },
110
+ // // TODO: extract ease-in from string and convert/map it to a cubicBezier array
111
+ // cubicBezier: [0, 1.38, 1, -0.41],
112
+ // })
113
+ // }
114
+ // initialPositionRef.current = boundingBox
115
+ // })
119
116
 
120
117
  if (!animation) {
121
118
  return null
@@ -124,13 +121,19 @@ export function createAnimations<A extends Object>(animations: A): AnimationDriv
124
121
  // add css transition
125
122
  // TODO: we disabled the transform transition, because it will create issue for inverse function and animate function
126
123
  // for non layout transform properties either use animate function or find a workaround to do it with css
127
- style.transition = `${keys} ${animation}${
128
- props.layout ? ',width 0s, height 0s, margin 0s, padding 0s, transform' : ''
129
- }`
124
+ style.transition = keys
125
+ .map((key) => {
126
+ const override = animations[animationConfig?.[key]] ?? animation
127
+ return `${key} ${override}`
128
+ })
129
+ .join(', ')
130
+
131
+ // style.transition = `${keys} ${animation}${
132
+ // props.layout ? ',width 0s, height 0s, margin 0s, padding 0s, transform' : ''
133
+ // }`
130
134
 
131
135
  if (process.env.NODE_ENV === 'development' && props['debug']) {
132
- // biome-ignore lint/suspicious/noConsoleLog: ok
133
- console.log('CSS animation', style, { isEntering, isExiting })
136
+ console.info('CSS animation', style, { isEntering, isExiting })
134
137
  }
135
138
 
136
139
  return { style }
@@ -138,26 +141,26 @@ export function createAnimations<A extends Object>(animations: A): AnimationDriv
138
141
  }
139
142
  }
140
143
 
141
- const isChanged = (initialBox: any, finalBox: any) => {
142
- // we just mounted, so we don't have complete data yet
143
- if (!initialBox || !finalBox) return false
144
+ // const isChanged = (initialBox: any, finalBox: any) => {
145
+ // // we just mounted, so we don't have complete data yet
146
+ // if (!initialBox || !finalBox) return false
144
147
 
145
- // deep compare the two boxes
146
- return JSON.stringify(initialBox) !== JSON.stringify(finalBox)
147
- }
148
+ // // deep compare the two boxes
149
+ // return JSON.stringify(initialBox) !== JSON.stringify(finalBox)
150
+ // }
148
151
 
149
- const invert = (el, from, to) => {
150
- const { x: fromX, y: fromY, width: fromWidth, height: fromHeight } = from
151
- const { x, y, width, height } = to
152
+ // const invert = (el, from, to) => {
153
+ // const { x: fromX, y: fromY, width: fromWidth, height: fromHeight } = from
154
+ // const { x, y, width, height } = to
152
155
 
153
- const transform = {
154
- x: x - fromX - (fromWidth - width) / 2,
155
- y: y - fromY - (fromHeight - height) / 2,
156
- scaleX: width / fromWidth,
157
- scaleY: height / fromHeight,
158
- }
156
+ // const transform = {
157
+ // x: x - fromX - (fromWidth - width) / 2,
158
+ // y: y - fromY - (fromHeight - height) / 2,
159
+ // scaleX: width / fromWidth,
160
+ // scaleY: height / fromHeight,
161
+ // }
159
162
 
160
- el.style.transform = `translate(${transform.x}px, ${transform.y}px) scaleX(${transform.scaleX}) scaleY(${transform.scaleY})`
163
+ // el.style.transform = `translate(${transform.x}px, ${transform.y}px) scaleX(${transform.scaleX}) scaleY(${transform.scaleY})`
161
164
 
162
- return transform
163
- }
165
+ // return transform
166
+ // }
package/types/createAnimations.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"createAnimations.d.ts","sourceRoot":"","sources":["../src/createAnimations.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EAKhB,MAAM,eAAe,CAAA;AAKtB,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,EAAE,UAAU,EAAE,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,CA+HpF"}
1
+ {"version":3,"file":"createAnimations.d.ts","sourceRoot":"","sources":["../src/createAnimations.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EAKhB,MAAM,eAAe,CAAA;AAKtB,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,EAAE,UAAU,EAAE,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,CAkIpF"}