@tamagui/animations-css 1.85.12 → 1.86.1
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.
- package/dist/cjs/createAnimations.js +5 -5
- package/dist/cjs/createAnimations.js.map +1 -1
- package/dist/cjs/createAnimations.native.js +5 -5
- package/dist/cjs/createAnimations.native.js.map +1 -1
- package/dist/esm/createAnimations.js +5 -5
- package/dist/esm/createAnimations.js.map +1 -1
- package/dist/esm/createAnimations.native.js +5 -5
- package/dist/esm/createAnimations.native.js.map +1 -1
- package/package.json +6 -6
- package/src/createAnimations.tsx +9 -8
- package/types/createAnimations.d.ts.map +1 -1
|
@@ -43,7 +43,7 @@ function createAnimations(animations) {
|
|
|
43
43
|
}
|
|
44
44
|
};
|
|
45
45
|
},
|
|
46
|
-
useAnimatedNumberReaction({
|
|
46
|
+
useAnimatedNumberReaction({ value }, onValue) {
|
|
47
47
|
(0, import_react.useEffect)(() => {
|
|
48
48
|
const instance = value.getInstance();
|
|
49
49
|
let queue = reactionListeners.get(instance);
|
|
@@ -59,12 +59,12 @@ function createAnimations(animations) {
|
|
|
59
59
|
useAnimatedNumberStyle(val, getStyle) {
|
|
60
60
|
return getStyle(val.getValue());
|
|
61
61
|
},
|
|
62
|
-
useAnimations: ({ props, presence, style, componentState,
|
|
63
|
-
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
|
+
useAnimations: ({ props, presence, style, componentState, stateRef }) => {
|
|
63
|
+
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"], host = stateRef.current.host;
|
|
64
64
|
return (0, import_constants.useIsomorphicLayoutEffect)(() => {
|
|
65
|
-
if (!sendExitComplete || !isExiting || !
|
|
65
|
+
if (!sendExitComplete || !isExiting || !host)
|
|
66
66
|
return;
|
|
67
|
-
const node =
|
|
67
|
+
const node = host, onFinishAnimation = () => {
|
|
68
68
|
sendExitComplete == null || sendExitComplete();
|
|
69
69
|
};
|
|
70
70
|
return node.addEventListener("transitionend", onFinishAnimation), node.addEventListener("transitioncancel", onFinishAnimation), () => {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/createAnimations.tsx"],
|
|
4
|
-
"mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAA0C,+BAC1C,cAIO,0BAEP,sBAA2C,kCAC3C,eAAoC;AAE7B,SAAS,iBAAmC,YAAmC;AACpF,QAAM,oBAAoB,oBAAI,QAA4B;AAE1D,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,IAEjB,kBAAkB,SAA4C;AAC5D,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;AACX,gBAAM,YAAY,kBAAkB,IAAI,MAAM;AAC9C,UAAI,aACF,UAAU,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;AAAA,QAEtC;AAAA,QACA,OAAO;AAAA,QAAC;AAAA,MACV;AAAA,IACF;AAAA,IAEA,0BAA0B,EAAE,
|
|
4
|
+
"mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAA0C,+BAC1C,cAIO,0BAEP,sBAA2C,kCAC3C,eAAoC;AAE7B,SAAS,iBAAmC,YAAmC;AACpF,QAAM,oBAAoB,oBAAI,QAA4B;AAE1D,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,IAEjB,kBAAkB,SAA4C;AAC5D,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;AACX,gBAAM,YAAY,kBAAkB,IAAI,MAAM;AAC9C,UAAI,aACF,UAAU,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;AAAA,QAEtC;AAAA,QACA,OAAO;AAAA,QAAC;AAAA,MACV;AAAA,IACF;AAAA,IAEA,0BAA0B,EAAE,MAAM,GAAG,SAAS;AAC5C,kCAAU,MAAM;AACd,cAAM,WAAW,MAAM,YAAY;AACnC,YAAI,QAAQ,kBAAkB,IAAI,QAAQ;AAC1C,YAAI,CAAC,OAAO;AACV,gBAAM,OAAO,oBAAI,IAAc;AAC/B,4BAAkB,IAAI,UAAU,IAAI,GACpC,QAAQ;AAAA,QACV;AACA,qBAAM,IAAI,OAAO,GACV,MAAM;AACX,iCAAO,OAAO;AAAA,QAChB;AAAA,MACF,GAAG,CAAC,CAAC;AAAA,IACP;AAAA,IAEA,uBAAuB,KAAK,UAAU;AACpC,aAAO,SAAS,IAAI,SAAS,CAAC;AAAA,IAChC;AAAA,IAEA,eAAe,CAAC,EAAE,OAAO,UAAU,OAAO,gBAAgB,SAAS,MAAM;AACvE,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,GAClC,OAAO,SAAS,QAAQ;AAiD9B,iBA/CA,4CAA0B,MAAM;AAC9B,YAAI,CAAC,oBAAoB,CAAC,aAAa,CAAC;AAAM;AAC9C,cAAM,OAAO,MACP,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,aAID,MAAM,QAAQ,MAAM,SAAS,MAC/B,MAAM,gBAAY,gCAAmB,MAAM,SAAS,IAMtD,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,MAAM,YAAY,EAAE,YAAY,UAAU,CAAC,GAG3E,EAAE,MAAM,KAzBN;AAAA,IA0BX;AAAA,EACF;AACF;",
|
|
5
5
|
"names": []
|
|
6
6
|
}
|
|
@@ -44,7 +44,7 @@ function createAnimations(animations) {
|
|
|
44
44
|
}
|
|
45
45
|
};
|
|
46
46
|
},
|
|
47
|
-
useAnimatedNumberReaction({
|
|
47
|
+
useAnimatedNumberReaction({ value }, onValue) {
|
|
48
48
|
(0, import_react.useEffect)(() => {
|
|
49
49
|
const instance = value.getInstance();
|
|
50
50
|
let queue = reactionListeners.get(instance);
|
|
@@ -60,12 +60,12 @@ function createAnimations(animations) {
|
|
|
60
60
|
useAnimatedNumberStyle(val, getStyle) {
|
|
61
61
|
return getStyle(val.getValue());
|
|
62
62
|
},
|
|
63
|
-
useAnimations: ({ props, presence, style, componentState,
|
|
64
|
-
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"];
|
|
63
|
+
useAnimations: ({ props, presence, style, componentState, stateRef }) => {
|
|
64
|
+
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"], host = stateRef.current.host;
|
|
65
65
|
return (0, import_constants.useIsomorphicLayoutEffect)(() => {
|
|
66
|
-
if (!sendExitComplete || !isExiting || !
|
|
66
|
+
if (!sendExitComplete || !isExiting || !host)
|
|
67
67
|
return;
|
|
68
|
-
const node =
|
|
68
|
+
const node = host, onFinishAnimation = () => {
|
|
69
69
|
sendExitComplete == null || sendExitComplete();
|
|
70
70
|
};
|
|
71
71
|
return node.addEventListener("transitionend", onFinishAnimation), node.addEventListener("transitioncancel", onFinishAnimation), () => {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/createAnimations.tsx"],
|
|
4
|
-
"mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAA0C,+BAC1C,cAIO,0BAEP,sBAA2C,kCAC3C,eAAoC;AAE7B,SAAS,iBAAmC,YAAmC;AACpF,QAAM,oBAAoB,oBAAI,QAA4B;AAE1D,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,IAEjB,kBAAkB,SAA4C;AAC5D,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;AACX,gBAAM,YAAY,kBAAkB,IAAI,MAAM;AAC9C,UAAI,aACF,UAAU,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;AAAA,QAEtC;AAAA,QACA,OAAO;AAAA,QAAC;AAAA,MACV;AAAA,IACF;AAAA,IAEA,0BAA0B,EAAE,
|
|
4
|
+
"mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAA0C,+BAC1C,cAIO,0BAEP,sBAA2C,kCAC3C,eAAoC;AAE7B,SAAS,iBAAmC,YAAmC;AACpF,QAAM,oBAAoB,oBAAI,QAA4B;AAE1D,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,IAEjB,kBAAkB,SAA4C;AAC5D,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;AACX,gBAAM,YAAY,kBAAkB,IAAI,MAAM;AAC9C,UAAI,aACF,UAAU,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;AAAA,QAEtC;AAAA,QACA,OAAO;AAAA,QAAC;AAAA,MACV;AAAA,IACF;AAAA,IAEA,0BAA0B,EAAE,MAAM,GAAG,SAAS;AAC5C,kCAAU,MAAM;AACd,cAAM,WAAW,MAAM,YAAY;AACnC,YAAI,QAAQ,kBAAkB,IAAI,QAAQ;AAC1C,YAAI,CAAC,OAAO;AACV,gBAAM,OAAO,oBAAI,IAAc;AAC/B,4BAAkB,IAAI,UAAU,IAAI,GACpC,QAAQ;AAAA,QACV;AACA,qBAAM,IAAI,OAAO,GACV,MAAM;AACX,iCAAO,OAAO;AAAA,QAChB;AAAA,MACF,GAAG,CAAC,CAAC;AAAA,IACP;AAAA,IAEA,uBAAuB,KAAK,UAAU;AACpC,aAAO,SAAS,IAAI,SAAS,CAAC;AAAA,IAChC;AAAA,IAEA,eAAe,CAAC,EAAE,OAAO,UAAU,OAAO,gBAAgB,SAAS,MAAM;AACvE,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,GAClC,OAAO,SAAS,QAAQ;AAiD9B,iBA/CA,4CAA0B,MAAM;AAC9B,YAAI,CAAC,oBAAoB,CAAC,aAAa,CAAC;AAAM;AAC9C,cAAM,OAAO,MACP,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,aAID,MAAM,QAAQ,MAAM,SAAS,MAC/B,MAAM,gBAAY,gCAAmB,MAAM,SAAS,IAMtD,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,MAAM,YAAY,EAAE,YAAY,UAAU,CAAC,GAG3E,EAAE,MAAM,KAzBN;AAAA,IA0BX;AAAA,EACF;AACF;",
|
|
5
5
|
"names": []
|
|
6
6
|
}
|
|
@@ -29,7 +29,7 @@ function createAnimations(animations) {
|
|
|
29
29
|
}
|
|
30
30
|
};
|
|
31
31
|
},
|
|
32
|
-
useAnimatedNumberReaction({
|
|
32
|
+
useAnimatedNumberReaction({ value }, onValue) {
|
|
33
33
|
useEffect(() => {
|
|
34
34
|
const instance = value.getInstance();
|
|
35
35
|
let queue = reactionListeners.get(instance);
|
|
@@ -45,12 +45,12 @@ function createAnimations(animations) {
|
|
|
45
45
|
useAnimatedNumberStyle(val, getStyle) {
|
|
46
46
|
return getStyle(val.getValue());
|
|
47
47
|
},
|
|
48
|
-
useAnimations: ({ props, presence, style, componentState,
|
|
49
|
-
const isEntering = !!componentState.unmounted, isExiting = presence?.[0] === !1, sendExitComplete = presence?.[1], [animationKey, animationConfig] = [].concat(props.animation), animation = animations[animationKey], keys = props.animateOnly ?? ["all"];
|
|
48
|
+
useAnimations: ({ props, presence, style, componentState, stateRef }) => {
|
|
49
|
+
const isEntering = !!componentState.unmounted, isExiting = presence?.[0] === !1, sendExitComplete = presence?.[1], [animationKey, animationConfig] = [].concat(props.animation), animation = animations[animationKey], keys = props.animateOnly ?? ["all"], host = stateRef.current.host;
|
|
50
50
|
return useIsomorphicLayoutEffect(() => {
|
|
51
|
-
if (!sendExitComplete || !isExiting || !
|
|
51
|
+
if (!sendExitComplete || !isExiting || !host)
|
|
52
52
|
return;
|
|
53
|
-
const node =
|
|
53
|
+
const node = host, onFinishAnimation = () => {
|
|
54
54
|
sendExitComplete?.();
|
|
55
55
|
};
|
|
56
56
|
return node.addEventListener("transitionend", onFinishAnimation), node.addEventListener("transitioncancel", onFinishAnimation), () => {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/createAnimations.tsx"],
|
|
4
|
-
"mappings": "AAAA,SAAS,iCAAiC;AAC1C;AAAA,EAGE;AAAA,OACK;AAEP,SAAS,eAAe,mBAAmB;AAC3C,SAAS,WAAW,gBAAgB;AAE7B,SAAS,iBAAmC,YAAmC;AACpF,QAAM,oBAAoB,oBAAI,QAA4B;AAE1D,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,IAEjB,kBAAkB,SAA4C;AAC5D,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;AACX,gBAAM,YAAY,kBAAkB,IAAI,MAAM;AAC9C,UAAI,aACF,UAAU,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;AAAA,QAEtC;AAAA,QACA,OAAO;AAAA,QAAC;AAAA,MACV;AAAA,IACF;AAAA,IAEA,0BAA0B,EAAE,
|
|
4
|
+
"mappings": "AAAA,SAAS,iCAAiC;AAC1C;AAAA,EAGE;AAAA,OACK;AAEP,SAAS,eAAe,mBAAmB;AAC3C,SAAS,WAAW,gBAAgB;AAE7B,SAAS,iBAAmC,YAAmC;AACpF,QAAM,oBAAoB,oBAAI,QAA4B;AAE1D,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,IAEjB,kBAAkB,SAA4C;AAC5D,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;AACX,gBAAM,YAAY,kBAAkB,IAAI,MAAM;AAC9C,UAAI,aACF,UAAU,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;AAAA,QAEtC;AAAA,QACA,OAAO;AAAA,QAAC;AAAA,MACV;AAAA,IACF;AAAA,IAEA,0BAA0B,EAAE,MAAM,GAAG,SAAS;AAC5C,gBAAU,MAAM;AACd,cAAM,WAAW,MAAM,YAAY;AACnC,YAAI,QAAQ,kBAAkB,IAAI,QAAQ;AAC1C,YAAI,CAAC,OAAO;AACV,gBAAM,OAAO,oBAAI,IAAc;AAC/B,4BAAkB,IAAI,UAAU,IAAI,GACpC,QAAQ;AAAA,QACV;AACA,qBAAM,IAAI,OAAO,GACV,MAAM;AACX,iBAAO,OAAO,OAAO;AAAA,QACvB;AAAA,MACF,GAAG,CAAC,CAAC;AAAA,IACP;AAAA,IAEA,uBAAuB,KAAK,UAAU;AACpC,aAAO,SAAS,IAAI,SAAS,CAAC;AAAA,IAChC;AAAA,IAEA,eAAe,CAAC,EAAE,OAAO,UAAU,OAAO,gBAAgB,SAAS,MAAM;AACvE,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,GAClC,OAAO,SAAS,QAAQ;AAiD9B,aA/CA,0BAA0B,MAAM;AAC9B,YAAI,CAAC,oBAAoB,CAAC,aAAa,CAAC;AAAM;AAC9C,cAAM,OAAO,MACP,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,aAID,MAAM,QAAQ,MAAM,SAAS,MAC/B,MAAM,YAAY,mBAAmB,MAAM,SAAS,IAMtD,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,MAAM,YAAY,EAAE,YAAY,UAAU,CAAC,GAG3E,EAAE,MAAM,KAzBN;AAAA,IA0BX;AAAA,EACF;AACF;",
|
|
5
5
|
"names": []
|
|
6
6
|
}
|
|
@@ -29,7 +29,7 @@ function createAnimations(animations) {
|
|
|
29
29
|
}
|
|
30
30
|
};
|
|
31
31
|
},
|
|
32
|
-
useAnimatedNumberReaction({
|
|
32
|
+
useAnimatedNumberReaction({ value }, onValue) {
|
|
33
33
|
useEffect(() => {
|
|
34
34
|
const instance = value.getInstance();
|
|
35
35
|
let queue = reactionListeners.get(instance);
|
|
@@ -45,12 +45,12 @@ function createAnimations(animations) {
|
|
|
45
45
|
useAnimatedNumberStyle(val, getStyle) {
|
|
46
46
|
return getStyle(val.getValue());
|
|
47
47
|
},
|
|
48
|
-
useAnimations: ({ props, presence, style, componentState,
|
|
49
|
-
const isEntering = !!componentState.unmounted, isExiting = presence?.[0] === !1, sendExitComplete = presence?.[1], [animationKey, animationConfig] = [].concat(props.animation), animation = animations[animationKey], keys = props.animateOnly ?? ["all"];
|
|
48
|
+
useAnimations: ({ props, presence, style, componentState, stateRef }) => {
|
|
49
|
+
const isEntering = !!componentState.unmounted, isExiting = presence?.[0] === !1, sendExitComplete = presence?.[1], [animationKey, animationConfig] = [].concat(props.animation), animation = animations[animationKey], keys = props.animateOnly ?? ["all"], host = stateRef.current.host;
|
|
50
50
|
return useIsomorphicLayoutEffect(() => {
|
|
51
|
-
if (!sendExitComplete || !isExiting || !
|
|
51
|
+
if (!sendExitComplete || !isExiting || !host)
|
|
52
52
|
return;
|
|
53
|
-
const node =
|
|
53
|
+
const node = host, onFinishAnimation = () => {
|
|
54
54
|
sendExitComplete?.();
|
|
55
55
|
};
|
|
56
56
|
return node.addEventListener("transitionend", onFinishAnimation), node.addEventListener("transitioncancel", onFinishAnimation), () => {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/createAnimations.tsx"],
|
|
4
|
-
"mappings": "AAAA,SAAS,iCAAiC;AAC1C;AAAA,EAGE;AAAA,OACK;AAEP,SAAS,eAAe,mBAAmB;AAC3C,SAAS,WAAW,gBAAgB;AAE7B,SAAS,iBAAmC,YAAmC;AACpF,QAAM,oBAAoB,oBAAI,QAA4B;AAE1D,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,IAEjB,kBAAkB,SAA4C;AAC5D,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;AACX,gBAAM,YAAY,kBAAkB,IAAI,MAAM;AAC9C,UAAI,aACF,UAAU,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;AAAA,QAEtC;AAAA,QACA,OAAO;AAAA,QAAC;AAAA,MACV;AAAA,IACF;AAAA,IAEA,0BAA0B,EAAE,
|
|
4
|
+
"mappings": "AAAA,SAAS,iCAAiC;AAC1C;AAAA,EAGE;AAAA,OACK;AAEP,SAAS,eAAe,mBAAmB;AAC3C,SAAS,WAAW,gBAAgB;AAE7B,SAAS,iBAAmC,YAAmC;AACpF,QAAM,oBAAoB,oBAAI,QAA4B;AAE1D,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,IAEjB,kBAAkB,SAA4C;AAC5D,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;AACX,gBAAM,YAAY,kBAAkB,IAAI,MAAM;AAC9C,UAAI,aACF,UAAU,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;AAAA,QAEtC;AAAA,QACA,OAAO;AAAA,QAAC;AAAA,MACV;AAAA,IACF;AAAA,IAEA,0BAA0B,EAAE,MAAM,GAAG,SAAS;AAC5C,gBAAU,MAAM;AACd,cAAM,WAAW,MAAM,YAAY;AACnC,YAAI,QAAQ,kBAAkB,IAAI,QAAQ;AAC1C,YAAI,CAAC,OAAO;AACV,gBAAM,OAAO,oBAAI,IAAc;AAC/B,4BAAkB,IAAI,UAAU,IAAI,GACpC,QAAQ;AAAA,QACV;AACA,qBAAM,IAAI,OAAO,GACV,MAAM;AACX,iBAAO,OAAO,OAAO;AAAA,QACvB;AAAA,MACF,GAAG,CAAC,CAAC;AAAA,IACP;AAAA,IAEA,uBAAuB,KAAK,UAAU;AACpC,aAAO,SAAS,IAAI,SAAS,CAAC;AAAA,IAChC;AAAA,IAEA,eAAe,CAAC,EAAE,OAAO,UAAU,OAAO,gBAAgB,SAAS,MAAM;AACvE,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,GAClC,OAAO,SAAS,QAAQ;AAiD9B,aA/CA,0BAA0B,MAAM;AAC9B,YAAI,CAAC,oBAAoB,CAAC,aAAa,CAAC;AAAM;AAC9C,cAAM,OAAO,MACP,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,aAID,MAAM,QAAQ,MAAM,SAAS,MAC/B,MAAM,YAAY,mBAAmB,MAAM,SAAS,IAMtD,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,MAAM,YAAY,EAAE,YAAY,UAAU,CAAC,GAG3E,EAAE,MAAM,KAzBN;AAAA,IA0BX;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.
|
|
3
|
+
"version": "1.86.1",
|
|
4
4
|
"source": "src/index.ts",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"license": "MIT",
|
|
@@ -13,14 +13,14 @@
|
|
|
13
13
|
"dist"
|
|
14
14
|
],
|
|
15
15
|
"dependencies": {
|
|
16
|
-
"@tamagui/constants": "1.
|
|
17
|
-
"@tamagui/cubic-bezier-animator": "1.
|
|
18
|
-
"@tamagui/use-presence": "1.
|
|
19
|
-
"@tamagui/web": "1.
|
|
16
|
+
"@tamagui/constants": "1.86.1",
|
|
17
|
+
"@tamagui/cubic-bezier-animator": "1.86.1",
|
|
18
|
+
"@tamagui/use-presence": "1.86.1",
|
|
19
|
+
"@tamagui/web": "1.86.1",
|
|
20
20
|
"react": "^18.2.0"
|
|
21
21
|
},
|
|
22
22
|
"devDependencies": {
|
|
23
|
-
"@tamagui/build": "1.
|
|
23
|
+
"@tamagui/build": "1.86.1"
|
|
24
24
|
},
|
|
25
25
|
"scripts": {
|
|
26
26
|
"build": "tamagui-build",
|
package/src/createAnimations.tsx
CHANGED
|
@@ -38,7 +38,7 @@ export function createAnimations<A extends Object>(animations: A): AnimationDriv
|
|
|
38
38
|
}
|
|
39
39
|
},
|
|
40
40
|
|
|
41
|
-
useAnimatedNumberReaction({
|
|
41
|
+
useAnimatedNumberReaction({ value }, onValue) {
|
|
42
42
|
useEffect(() => {
|
|
43
43
|
const instance = value.getInstance()
|
|
44
44
|
let queue = reactionListeners.get(instance)
|
|
@@ -58,7 +58,7 @@ export function createAnimations<A extends Object>(animations: A): AnimationDriv
|
|
|
58
58
|
return getStyle(val.getValue())
|
|
59
59
|
},
|
|
60
60
|
|
|
61
|
-
useAnimations: ({ props, presence, style, componentState,
|
|
61
|
+
useAnimations: ({ props, presence, style, componentState, stateRef }) => {
|
|
62
62
|
const isEntering = !!componentState.unmounted
|
|
63
63
|
const isExiting = presence?.[0] === false
|
|
64
64
|
const sendExitComplete = presence?.[1]
|
|
@@ -66,10 +66,11 @@ export function createAnimations<A extends Object>(animations: A): AnimationDriv
|
|
|
66
66
|
const [animationKey, animationConfig] = [].concat(props.animation)
|
|
67
67
|
const animation = animations[animationKey]
|
|
68
68
|
const keys = props.animateOnly ?? ['all']
|
|
69
|
+
const host = stateRef.current.host
|
|
69
70
|
|
|
70
71
|
useIsomorphicLayoutEffect(() => {
|
|
71
|
-
if (!sendExitComplete || !isExiting || !
|
|
72
|
-
const node =
|
|
72
|
+
if (!sendExitComplete || !isExiting || !host) return
|
|
73
|
+
const node = host as HTMLElement
|
|
73
74
|
const onFinishAnimation = () => {
|
|
74
75
|
sendExitComplete?.()
|
|
75
76
|
}
|
|
@@ -83,14 +84,14 @@ export function createAnimations<A extends Object>(animations: A): AnimationDriv
|
|
|
83
84
|
|
|
84
85
|
// layout animations
|
|
85
86
|
// useIsomorphicLayoutEffect(() => {
|
|
86
|
-
// if (!
|
|
87
|
+
// if (!host || !props.layout) {
|
|
87
88
|
// return
|
|
88
89
|
// }
|
|
89
90
|
// // @ts-ignore
|
|
90
|
-
// const boundingBox =
|
|
91
|
+
// const boundingBox = host?.getBoundingClientRect()
|
|
91
92
|
// if (isChanged(initialPositionRef.current, boundingBox)) {
|
|
92
93
|
// const transform = invert(
|
|
93
|
-
//
|
|
94
|
+
// host,
|
|
94
95
|
// boundingBox,
|
|
95
96
|
// initialPositionRef.current
|
|
96
97
|
// )
|
|
@@ -101,7 +102,7 @@ export function createAnimations<A extends Object>(animations: A): AnimationDriv
|
|
|
101
102
|
// duration: 1000,
|
|
102
103
|
// onUpdate: ({ x, y, scaleX, scaleY }) => {
|
|
103
104
|
// // @ts-ignore
|
|
104
|
-
//
|
|
105
|
+
// host.style.transform = `translate(${x}px, ${y}px) scaleX(${scaleX}) scaleY(${scaleY})`
|
|
105
106
|
// // TODO: handle childRef inverse scale
|
|
106
107
|
// // childRef.current.style.transform = `scaleX(${1 / scaleX}) scaleY(${
|
|
107
108
|
// // 1 / scaleY
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createAnimations.d.ts","sourceRoot":"","sources":["../src/createAnimations.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,eAAe,EAGhB,MAAM,eAAe,CAAA;AAKtB,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,EAAE,UAAU,EAAE,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"createAnimations.d.ts","sourceRoot":"","sources":["../src/createAnimations.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,eAAe,EAGhB,MAAM,eAAe,CAAA;AAKtB,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,EAAE,UAAU,EAAE,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,CAwIpF"}
|