@xanui/core 1.2.65 → 1.2.66
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/Transition/index.cjs +84 -38
- package/Transition/index.cjs.map +1 -1
- package/Transition/index.d.ts +1 -1
- package/Transition/index.js +85 -39
- package/Transition/index.js.map +1 -1
- package/Transition/variants.cjs +19 -9
- package/Transition/variants.cjs.map +1 -1
- package/Transition/variants.d.ts +10 -0
- package/Transition/variants.js +19 -9
- package/Transition/variants.js.map +1 -1
- package/package.json +1 -1
package/Transition/index.cjs
CHANGED
|
@@ -19,6 +19,8 @@ const getVariant = (rect, variant) => {
|
|
|
19
19
|
function Transition(_a) {
|
|
20
20
|
var { children } = _a, options = tslib.__rest(_a, ["children"]);
|
|
21
21
|
let { disableInitialTransition = false, variant = "fade", duration = 400, delay, ease, easing, open, onOpen, onOpened, onClose, onClosed, onState } = options;
|
|
22
|
+
const endTimer = React.useRef(null);
|
|
23
|
+
const animId = React.useRef(0);
|
|
22
24
|
const [rect, setRect] = React.useState();
|
|
23
25
|
const [isDisableInitial, setIsDisableInitial] = React.useState(disableInitialTransition);
|
|
24
26
|
const ref = React.useRef(null);
|
|
@@ -30,59 +32,103 @@ function Transition(_a) {
|
|
|
30
32
|
};
|
|
31
33
|
let [cls, setCls] = React.useState(() => {
|
|
32
34
|
let props = {};
|
|
33
|
-
if (!isDisableInitial) {
|
|
34
|
-
props.
|
|
35
|
-
|
|
36
|
-
else if (isDisableInitial && !open) {
|
|
37
|
-
props.visibility = 'hidden';
|
|
35
|
+
if (!isDisableInitial || (isDisableInitial && !open)) {
|
|
36
|
+
props.opacity = 0;
|
|
37
|
+
props.pointerEvents = 'none';
|
|
38
38
|
}
|
|
39
39
|
return style(props);
|
|
40
40
|
});
|
|
41
|
+
// useEffect(() => {
|
|
42
|
+
// const node = ref.current
|
|
43
|
+
// if (!node) return
|
|
44
|
+
// const observer = new ResizeObserver(() => {
|
|
45
|
+
// const rect = node.getBoundingClientRect()
|
|
46
|
+
// setRect(rect)
|
|
47
|
+
// })
|
|
48
|
+
// observer.observe(node)
|
|
49
|
+
// return () => observer.disconnect()
|
|
50
|
+
// }, [])
|
|
41
51
|
React.useEffect(() => {
|
|
42
|
-
|
|
43
|
-
const
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
52
|
+
let frame;
|
|
53
|
+
const measure = () => {
|
|
54
|
+
const node = ref.current;
|
|
55
|
+
if (!node) {
|
|
56
|
+
frame = requestAnimationFrame(measure); // ⬅️ retry next frame
|
|
57
|
+
return;
|
|
58
|
+
}
|
|
59
|
+
const rect = node.getBoundingClientRect();
|
|
60
|
+
const v = getVariant(rect, variant);
|
|
61
|
+
if (isDisableInitial) {
|
|
62
|
+
setCls(style(open ? v.to : v.from));
|
|
63
|
+
}
|
|
64
|
+
else {
|
|
65
|
+
setCls(style(open ? v.from : v.to));
|
|
66
|
+
}
|
|
67
|
+
setRect(rect);
|
|
68
|
+
};
|
|
69
|
+
frame = requestAnimationFrame(measure);
|
|
70
|
+
return () => {
|
|
71
|
+
if (endTimer.current) {
|
|
72
|
+
clearTimeout(endTimer.current);
|
|
73
|
+
}
|
|
74
|
+
cancelAnimationFrame(frame);
|
|
75
|
+
};
|
|
47
76
|
}, []);
|
|
48
|
-
React.
|
|
77
|
+
React.useEffect(() => {
|
|
49
78
|
if (rect) {
|
|
50
|
-
|
|
51
|
-
let
|
|
52
|
-
let trans = ` ${duration}ms ${_ease} ${delay || 0}ms`;
|
|
79
|
+
let _duration = isDisableInitial ? 0 : duration;
|
|
80
|
+
let _delay = isDisableInitial ? 0 : (delay || 0);
|
|
53
81
|
if (isDisableInitial) {
|
|
54
|
-
trans = '';
|
|
55
82
|
setIsDisableInitial(false);
|
|
56
83
|
}
|
|
57
|
-
|
|
84
|
+
const v = getVariant(rect, variant);
|
|
85
|
+
let _css = open ? v.to : v.from;
|
|
86
|
+
let _ = Object.assign(Object.assign({}, _css), { transition: Object.keys(_css || {})
|
|
87
|
+
.map(k => `${oncss.formatCSSProp(k)} ${_duration}ms ${_ease} ${_delay}ms`)
|
|
88
|
+
.join(", "), willChange: Object.keys(_css || {})
|
|
89
|
+
.map(oncss.formatCSSProp)
|
|
90
|
+
.join(", ") });
|
|
91
|
+
if (open) {
|
|
92
|
+
onOpen === null || onOpen === void 0 ? void 0 : onOpen();
|
|
93
|
+
onState === null || onState === void 0 ? void 0 : onState("open");
|
|
94
|
+
}
|
|
95
|
+
else {
|
|
96
|
+
onClose === null || onClose === void 0 ? void 0 : onClose();
|
|
97
|
+
onState === null || onState === void 0 ? void 0 : onState("close");
|
|
98
|
+
}
|
|
58
99
|
setCls(style(_));
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
onClosed();
|
|
77
|
-
onState && onState(open ? "opened" : "closed");
|
|
78
|
-
}, 1);
|
|
79
|
-
};
|
|
100
|
+
if (endTimer.current) {
|
|
101
|
+
clearTimeout(endTimer.current);
|
|
102
|
+
}
|
|
103
|
+
animId.current++;
|
|
104
|
+
const id = animId.current;
|
|
105
|
+
endTimer.current = setTimeout(() => {
|
|
106
|
+
if (id !== animId.current)
|
|
107
|
+
return;
|
|
108
|
+
if (open) {
|
|
109
|
+
onOpened === null || onOpened === void 0 ? void 0 : onOpened();
|
|
110
|
+
onState === null || onState === void 0 ? void 0 : onState("opened");
|
|
111
|
+
}
|
|
112
|
+
else {
|
|
113
|
+
onClosed === null || onClosed === void 0 ? void 0 : onClosed();
|
|
114
|
+
onState === null || onState === void 0 ? void 0 : onState("closed");
|
|
115
|
+
}
|
|
116
|
+
}, _duration + _delay);
|
|
80
117
|
}
|
|
81
118
|
}, [rect, open, variant]);
|
|
82
119
|
const clone = React.Children.only(children);
|
|
83
120
|
return React.cloneElement(clone, {
|
|
84
121
|
className: cls,
|
|
85
|
-
ref
|
|
122
|
+
ref: (node) => {
|
|
123
|
+
ref.current = node;
|
|
124
|
+
const childRef = clone.ref;
|
|
125
|
+
if (typeof childRef === "function") {
|
|
126
|
+
childRef(node);
|
|
127
|
+
}
|
|
128
|
+
else if (childRef) {
|
|
129
|
+
childRef.current = node;
|
|
130
|
+
}
|
|
131
|
+
}
|
|
86
132
|
});
|
|
87
133
|
}
|
|
88
134
|
|
package/Transition/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../src/Transition/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { cloneElement, Children, useState,
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/Transition/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { cloneElement, Children, useState, useEffect, useRef } from 'react';\nimport * as variants from './variants'\nimport { css } from '../css';\nimport { useDocument } from '../Document';\nimport { useCSSCacheId } from '../css/CSSCacheProvider';\nimport { animationEases } from '../hooks/useAnimation';\nimport { formatCSSProp } from 'oncss';\nimport { CSSProps } from '../css/types';\n\nexport type TransitionVariantTypes = keyof typeof variants\nexport type TransitionVariant = TransitionVariantTypes | ((rect: DOMRect) => ({ from: CSSProps, to: CSSProps }))\nexport type TransitionState = \"open\" | \"opened\" | \"close\" | \"closed\"\n\nexport type TransitionProps = {\n children: React.ReactElement;\n open: boolean;\n variant: TransitionVariant\n ease?: string;\n easing?: keyof typeof animationEases;\n duration?: number;\n delay?: number;\n disableInitialTransition?: boolean;\n onOpen?: () => void;\n onOpened?: () => void;\n onClose?: () => void;\n onClosed?: () => void;\n onState?: (state: TransitionState) => void;\n}\n\nconst getVariant = (rect: DOMRect, variant: TransitionVariant) => {\n let fn = typeof variant === 'string' ? variants[variant] : variant\n if (!fn) throw new Error(`Transition variant \"${variant}\" not found.`)\n return fn(rect as DOMRect);\n}\n\nfunction Transition({ children, ...options }: TransitionProps) {\n let {\n disableInitialTransition = false,\n variant = \"fade\",\n duration = 400,\n delay,\n ease,\n easing,\n open,\n onOpen,\n onOpened,\n onClose,\n onClosed,\n onState\n } = options\n\n const endTimer = useRef<any>(null)\n const animId = useRef(0)\n const [rect, setRect] = useState<DOMRect>()\n const [isDisableInitial, setIsDisableInitial] = useState(disableInitialTransition)\n const ref = useRef<HTMLElement>(null)\n const doc = useDocument();\n const cacheId = useCSSCacheId()\n let _ease = ease || (animationEases as any)[easing as any] || animationEases.bounce\n\n const style = (obj = {}) => {\n return css(obj, { container: doc?.document, cacheId }).classname;\n }\n\n let [cls, setCls] = useState(() => {\n let props: any = {}\n if (!isDisableInitial || (isDisableInitial && !open)) {\n props.opacity = 0\n props.pointerEvents = 'none'\n }\n return style(props)\n })\n\n // useEffect(() => {\n // const node = ref.current\n // if (!node) return\n // const observer = new ResizeObserver(() => {\n // const rect = node.getBoundingClientRect()\n // setRect(rect)\n // })\n // observer.observe(node)\n // return () => observer.disconnect()\n // }, [])\n\n useEffect(() => {\n let frame: any\n\n const measure = () => {\n const node = ref.current\n if (!node) {\n frame = requestAnimationFrame(measure) // ⬅️ retry next frame\n return\n }\n\n const rect = node.getBoundingClientRect()\n const v = getVariant(rect, variant)\n\n if (isDisableInitial) {\n setCls(style(open ? v.to : v.from))\n } else {\n setCls(style(open ? v.from : v.to))\n }\n\n setRect(rect)\n }\n\n frame = requestAnimationFrame(measure)\n\n return () => {\n if (endTimer.current) {\n clearTimeout(endTimer.current)\n }\n cancelAnimationFrame(frame)\n }\n\n }, [])\n\n useEffect(() => {\n if (rect) {\n let _duration = isDisableInitial ? 0 : duration\n let _delay = isDisableInitial ? 0 : (delay || 0)\n\n if (isDisableInitial) {\n setIsDisableInitial(false)\n }\n const v = getVariant(rect, variant)\n let _css: any = open ? v.to : v.from\n\n let _ = {\n ..._css,\n transition: Object.keys(_css || {})\n .map(k => `${formatCSSProp(k)} ${_duration}ms ${_ease} ${_delay}ms`)\n .join(\", \"),\n willChange: Object.keys(_css || {})\n .map(formatCSSProp)\n .join(\", \"),\n }\n\n if (open) {\n onOpen?.();\n onState?.(\"open\");\n } else {\n onClose?.();\n onState?.(\"close\");\n }\n\n setCls(style(_))\n if (endTimer.current) {\n clearTimeout(endTimer.current)\n }\n animId.current++\n const id = animId.current\n endTimer.current = setTimeout(() => {\n if (id !== animId.current) return\n if (open) {\n onOpened?.();\n onState?.(\"opened\");\n } else {\n onClosed?.();\n onState?.(\"closed\");\n }\n }, _duration + _delay)\n }\n }, [rect, open, variant])\n\n const clone: any = Children.only(children);\n\n return cloneElement(clone, {\n className: cls,\n ref: (node: HTMLElement) => {\n ref.current = node;\n\n const childRef = (clone as any).ref;\n if (typeof childRef === \"function\") {\n childRef(node);\n } else if (childRef) {\n childRef.current = node;\n }\n }\n });\n}\n\nexport default Transition"],"names":[],"mappings":";;;;;;;;;;;;AA8BA;AACI;AACA;AAAS;AACT;AACJ;AAEA;AAAoB;AAChB;AAeA;AACA;;;AAGA;AACA;AACA;AACA;AAEA;;AAEA;;;;AAKQ;AACA;;AAEJ;AACJ;;;;;;;;;;;;AAcI;;AAGI;;AAEI;;;AAIJ;;;AAII;;;AAEA;;;AAIR;AAEA;AAEA;AACI;AACI;;;AAGR;;;;;AAOI;;;;;AAMA;AAEA;AAGS;AACA;;AAGA;;AAIL;AACA;;;AAEA;AACA;;AAGJ;AACA;AACI;;;AAGJ;AACA;AACI;;;AAEI;AACA;;;AAEA;AACA;;AAER;;;;;AAOJ;AACA;AACI;AAEA;AACA;;;;AAGI;;;AAGX;AACL;;"}
|
package/Transition/index.d.ts
CHANGED
|
@@ -26,7 +26,7 @@ type TransitionProps = {
|
|
|
26
26
|
};
|
|
27
27
|
declare function Transition({ children, ...options }: TransitionProps): React__default.DetailedReactHTMLElement<{
|
|
28
28
|
className: string;
|
|
29
|
-
ref:
|
|
29
|
+
ref: (node: HTMLElement) => void;
|
|
30
30
|
}, HTMLElement>;
|
|
31
31
|
|
|
32
32
|
export { Transition as default };
|
package/Transition/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { __rest } from 'tslib';
|
|
3
|
-
import {
|
|
3
|
+
import { useRef, useState, useEffect, Children, cloneElement } from 'react';
|
|
4
4
|
import * as variants from './variants.js';
|
|
5
5
|
import { css } from '../css/index.js';
|
|
6
6
|
import { useDocument } from '../Document/index.js';
|
|
@@ -17,6 +17,8 @@ const getVariant = (rect, variant) => {
|
|
|
17
17
|
function Transition(_a) {
|
|
18
18
|
var { children } = _a, options = __rest(_a, ["children"]);
|
|
19
19
|
let { disableInitialTransition = false, variant = "fade", duration = 400, delay, ease, easing, open, onOpen, onOpened, onClose, onClosed, onState } = options;
|
|
20
|
+
const endTimer = useRef(null);
|
|
21
|
+
const animId = useRef(0);
|
|
20
22
|
const [rect, setRect] = useState();
|
|
21
23
|
const [isDisableInitial, setIsDisableInitial] = useState(disableInitialTransition);
|
|
22
24
|
const ref = useRef(null);
|
|
@@ -28,59 +30,103 @@ function Transition(_a) {
|
|
|
28
30
|
};
|
|
29
31
|
let [cls, setCls] = useState(() => {
|
|
30
32
|
let props = {};
|
|
31
|
-
if (!isDisableInitial) {
|
|
32
|
-
props.
|
|
33
|
-
|
|
34
|
-
else if (isDisableInitial && !open) {
|
|
35
|
-
props.visibility = 'hidden';
|
|
33
|
+
if (!isDisableInitial || (isDisableInitial && !open)) {
|
|
34
|
+
props.opacity = 0;
|
|
35
|
+
props.pointerEvents = 'none';
|
|
36
36
|
}
|
|
37
37
|
return style(props);
|
|
38
38
|
});
|
|
39
|
+
// useEffect(() => {
|
|
40
|
+
// const node = ref.current
|
|
41
|
+
// if (!node) return
|
|
42
|
+
// const observer = new ResizeObserver(() => {
|
|
43
|
+
// const rect = node.getBoundingClientRect()
|
|
44
|
+
// setRect(rect)
|
|
45
|
+
// })
|
|
46
|
+
// observer.observe(node)
|
|
47
|
+
// return () => observer.disconnect()
|
|
48
|
+
// }, [])
|
|
39
49
|
useEffect(() => {
|
|
40
|
-
|
|
41
|
-
const
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
50
|
+
let frame;
|
|
51
|
+
const measure = () => {
|
|
52
|
+
const node = ref.current;
|
|
53
|
+
if (!node) {
|
|
54
|
+
frame = requestAnimationFrame(measure); // ⬅️ retry next frame
|
|
55
|
+
return;
|
|
56
|
+
}
|
|
57
|
+
const rect = node.getBoundingClientRect();
|
|
58
|
+
const v = getVariant(rect, variant);
|
|
59
|
+
if (isDisableInitial) {
|
|
60
|
+
setCls(style(open ? v.to : v.from));
|
|
61
|
+
}
|
|
62
|
+
else {
|
|
63
|
+
setCls(style(open ? v.from : v.to));
|
|
64
|
+
}
|
|
65
|
+
setRect(rect);
|
|
66
|
+
};
|
|
67
|
+
frame = requestAnimationFrame(measure);
|
|
68
|
+
return () => {
|
|
69
|
+
if (endTimer.current) {
|
|
70
|
+
clearTimeout(endTimer.current);
|
|
71
|
+
}
|
|
72
|
+
cancelAnimationFrame(frame);
|
|
73
|
+
};
|
|
45
74
|
}, []);
|
|
46
|
-
|
|
75
|
+
useEffect(() => {
|
|
47
76
|
if (rect) {
|
|
48
|
-
|
|
49
|
-
let
|
|
50
|
-
let trans = ` ${duration}ms ${_ease} ${delay || 0}ms`;
|
|
77
|
+
let _duration = isDisableInitial ? 0 : duration;
|
|
78
|
+
let _delay = isDisableInitial ? 0 : (delay || 0);
|
|
51
79
|
if (isDisableInitial) {
|
|
52
|
-
trans = '';
|
|
53
80
|
setIsDisableInitial(false);
|
|
54
81
|
}
|
|
55
|
-
|
|
82
|
+
const v = getVariant(rect, variant);
|
|
83
|
+
let _css = open ? v.to : v.from;
|
|
84
|
+
let _ = Object.assign(Object.assign({}, _css), { transition: Object.keys(_css || {})
|
|
85
|
+
.map(k => `${formatCSSProp(k)} ${_duration}ms ${_ease} ${_delay}ms`)
|
|
86
|
+
.join(", "), willChange: Object.keys(_css || {})
|
|
87
|
+
.map(formatCSSProp)
|
|
88
|
+
.join(", ") });
|
|
89
|
+
if (open) {
|
|
90
|
+
onOpen === null || onOpen === void 0 ? void 0 : onOpen();
|
|
91
|
+
onState === null || onState === void 0 ? void 0 : onState("open");
|
|
92
|
+
}
|
|
93
|
+
else {
|
|
94
|
+
onClose === null || onClose === void 0 ? void 0 : onClose();
|
|
95
|
+
onState === null || onState === void 0 ? void 0 : onState("close");
|
|
96
|
+
}
|
|
56
97
|
setCls(style(_));
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
onClosed();
|
|
75
|
-
onState && onState(open ? "opened" : "closed");
|
|
76
|
-
}, 1);
|
|
77
|
-
};
|
|
98
|
+
if (endTimer.current) {
|
|
99
|
+
clearTimeout(endTimer.current);
|
|
100
|
+
}
|
|
101
|
+
animId.current++;
|
|
102
|
+
const id = animId.current;
|
|
103
|
+
endTimer.current = setTimeout(() => {
|
|
104
|
+
if (id !== animId.current)
|
|
105
|
+
return;
|
|
106
|
+
if (open) {
|
|
107
|
+
onOpened === null || onOpened === void 0 ? void 0 : onOpened();
|
|
108
|
+
onState === null || onState === void 0 ? void 0 : onState("opened");
|
|
109
|
+
}
|
|
110
|
+
else {
|
|
111
|
+
onClosed === null || onClosed === void 0 ? void 0 : onClosed();
|
|
112
|
+
onState === null || onState === void 0 ? void 0 : onState("closed");
|
|
113
|
+
}
|
|
114
|
+
}, _duration + _delay);
|
|
78
115
|
}
|
|
79
116
|
}, [rect, open, variant]);
|
|
80
117
|
const clone = Children.only(children);
|
|
81
118
|
return cloneElement(clone, {
|
|
82
119
|
className: cls,
|
|
83
|
-
ref
|
|
120
|
+
ref: (node) => {
|
|
121
|
+
ref.current = node;
|
|
122
|
+
const childRef = clone.ref;
|
|
123
|
+
if (typeof childRef === "function") {
|
|
124
|
+
childRef(node);
|
|
125
|
+
}
|
|
126
|
+
else if (childRef) {
|
|
127
|
+
childRef.current = node;
|
|
128
|
+
}
|
|
129
|
+
}
|
|
84
130
|
});
|
|
85
131
|
}
|
|
86
132
|
|
package/Transition/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/Transition/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { cloneElement, Children, useState,
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/Transition/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { cloneElement, Children, useState, useEffect, useRef } from 'react';\nimport * as variants from './variants'\nimport { css } from '../css';\nimport { useDocument } from '../Document';\nimport { useCSSCacheId } from '../css/CSSCacheProvider';\nimport { animationEases } from '../hooks/useAnimation';\nimport { formatCSSProp } from 'oncss';\nimport { CSSProps } from '../css/types';\n\nexport type TransitionVariantTypes = keyof typeof variants\nexport type TransitionVariant = TransitionVariantTypes | ((rect: DOMRect) => ({ from: CSSProps, to: CSSProps }))\nexport type TransitionState = \"open\" | \"opened\" | \"close\" | \"closed\"\n\nexport type TransitionProps = {\n children: React.ReactElement;\n open: boolean;\n variant: TransitionVariant\n ease?: string;\n easing?: keyof typeof animationEases;\n duration?: number;\n delay?: number;\n disableInitialTransition?: boolean;\n onOpen?: () => void;\n onOpened?: () => void;\n onClose?: () => void;\n onClosed?: () => void;\n onState?: (state: TransitionState) => void;\n}\n\nconst getVariant = (rect: DOMRect, variant: TransitionVariant) => {\n let fn = typeof variant === 'string' ? variants[variant] : variant\n if (!fn) throw new Error(`Transition variant \"${variant}\" not found.`)\n return fn(rect as DOMRect);\n}\n\nfunction Transition({ children, ...options }: TransitionProps) {\n let {\n disableInitialTransition = false,\n variant = \"fade\",\n duration = 400,\n delay,\n ease,\n easing,\n open,\n onOpen,\n onOpened,\n onClose,\n onClosed,\n onState\n } = options\n\n const endTimer = useRef<any>(null)\n const animId = useRef(0)\n const [rect, setRect] = useState<DOMRect>()\n const [isDisableInitial, setIsDisableInitial] = useState(disableInitialTransition)\n const ref = useRef<HTMLElement>(null)\n const doc = useDocument();\n const cacheId = useCSSCacheId()\n let _ease = ease || (animationEases as any)[easing as any] || animationEases.bounce\n\n const style = (obj = {}) => {\n return css(obj, { container: doc?.document, cacheId }).classname;\n }\n\n let [cls, setCls] = useState(() => {\n let props: any = {}\n if (!isDisableInitial || (isDisableInitial && !open)) {\n props.opacity = 0\n props.pointerEvents = 'none'\n }\n return style(props)\n })\n\n // useEffect(() => {\n // const node = ref.current\n // if (!node) return\n // const observer = new ResizeObserver(() => {\n // const rect = node.getBoundingClientRect()\n // setRect(rect)\n // })\n // observer.observe(node)\n // return () => observer.disconnect()\n // }, [])\n\n useEffect(() => {\n let frame: any\n\n const measure = () => {\n const node = ref.current\n if (!node) {\n frame = requestAnimationFrame(measure) // ⬅️ retry next frame\n return\n }\n\n const rect = node.getBoundingClientRect()\n const v = getVariant(rect, variant)\n\n if (isDisableInitial) {\n setCls(style(open ? v.to : v.from))\n } else {\n setCls(style(open ? v.from : v.to))\n }\n\n setRect(rect)\n }\n\n frame = requestAnimationFrame(measure)\n\n return () => {\n if (endTimer.current) {\n clearTimeout(endTimer.current)\n }\n cancelAnimationFrame(frame)\n }\n\n }, [])\n\n useEffect(() => {\n if (rect) {\n let _duration = isDisableInitial ? 0 : duration\n let _delay = isDisableInitial ? 0 : (delay || 0)\n\n if (isDisableInitial) {\n setIsDisableInitial(false)\n }\n const v = getVariant(rect, variant)\n let _css: any = open ? v.to : v.from\n\n let _ = {\n ..._css,\n transition: Object.keys(_css || {})\n .map(k => `${formatCSSProp(k)} ${_duration}ms ${_ease} ${_delay}ms`)\n .join(\", \"),\n willChange: Object.keys(_css || {})\n .map(formatCSSProp)\n .join(\", \"),\n }\n\n if (open) {\n onOpen?.();\n onState?.(\"open\");\n } else {\n onClose?.();\n onState?.(\"close\");\n }\n\n setCls(style(_))\n if (endTimer.current) {\n clearTimeout(endTimer.current)\n }\n animId.current++\n const id = animId.current\n endTimer.current = setTimeout(() => {\n if (id !== animId.current) return\n if (open) {\n onOpened?.();\n onState?.(\"opened\");\n } else {\n onClosed?.();\n onState?.(\"closed\");\n }\n }, _duration + _delay)\n }\n }, [rect, open, variant])\n\n const clone: any = Children.only(children);\n\n return cloneElement(clone, {\n className: cls,\n ref: (node: HTMLElement) => {\n ref.current = node;\n\n const childRef = (clone as any).ref;\n if (typeof childRef === \"function\") {\n childRef(node);\n } else if (childRef) {\n childRef.current = node;\n }\n }\n });\n}\n\nexport default Transition"],"names":[],"mappings":";;;;;;;;;;AA8BA;AACI;AACA;AAAS;AACT;AACJ;AAEA;AAAoB;AAChB;AAeA;AACA;;;AAGA;AACA;AACA;AACA;AAEA;;AAEA;;;;AAKQ;AACA;;AAEJ;AACJ;;;;;;;;;;;;AAcI;;AAGI;;AAEI;;;AAIJ;;;AAII;;;AAEA;;;AAIR;AAEA;AAEA;AACI;AACI;;;AAGR;;;;;AAOI;;;;;AAMA;AAEA;AAGS;AACA;;AAGA;;AAIL;AACA;;;AAEA;AACA;;AAGJ;AACA;AACI;;;AAGJ;AACA;AACI;;;AAEI;AACA;;;AAEA;AACA;;AAER;;;;;AAOJ;AACA;AACI;AAEA;AACA;;;;AAGI;;;AAGX;AACL;;"}
|
package/Transition/variants.cjs
CHANGED
|
@@ -50,6 +50,7 @@ const scaleYDown = () => ({
|
|
|
50
50
|
from: {
|
|
51
51
|
transform: "scaleY(0.8)",
|
|
52
52
|
opacity: 0,
|
|
53
|
+
pointerEvents: 'none',
|
|
53
54
|
transformOrigin: "top"
|
|
54
55
|
},
|
|
55
56
|
to: {
|
|
@@ -62,7 +63,8 @@ const scaleYUp = () => ({
|
|
|
62
63
|
from: {
|
|
63
64
|
transform: "scaleY(0.8)",
|
|
64
65
|
transformOrigin: "bottom",
|
|
65
|
-
opacity: 0
|
|
66
|
+
opacity: 0,
|
|
67
|
+
pointerEvents: 'none'
|
|
66
68
|
},
|
|
67
69
|
to: {
|
|
68
70
|
transform: "scaleY(1)",
|
|
@@ -73,7 +75,8 @@ const scaleYUp = () => ({
|
|
|
73
75
|
const fade = () => {
|
|
74
76
|
return {
|
|
75
77
|
from: {
|
|
76
|
-
opacity: 0
|
|
78
|
+
opacity: 0,
|
|
79
|
+
pointerEvents: 'none'
|
|
77
80
|
},
|
|
78
81
|
to: {
|
|
79
82
|
opacity: 1
|
|
@@ -85,7 +88,8 @@ const fadeDown = (rect) => {
|
|
|
85
88
|
return {
|
|
86
89
|
from: {
|
|
87
90
|
transform: `translateY(-${y}px) scale(0.98)`,
|
|
88
|
-
opacity: 0
|
|
91
|
+
opacity: 0,
|
|
92
|
+
pointerEvents: 'none'
|
|
89
93
|
},
|
|
90
94
|
to: {
|
|
91
95
|
transform: `translateY(0) scale(1)`,
|
|
@@ -98,7 +102,8 @@ const fadeUp = (rect) => {
|
|
|
98
102
|
return {
|
|
99
103
|
from: {
|
|
100
104
|
transform: `translateY(${y}px) scale(0.98)`,
|
|
101
|
-
opacity: 0
|
|
105
|
+
opacity: 0,
|
|
106
|
+
pointerEvents: 'none'
|
|
102
107
|
},
|
|
103
108
|
to: {
|
|
104
109
|
transform: `translateY(0) scale(1)`,
|
|
@@ -111,7 +116,8 @@ const fadeRight = (rect) => {
|
|
|
111
116
|
return {
|
|
112
117
|
from: {
|
|
113
118
|
transform: `translateX(-${x}px) scale(0.98)`,
|
|
114
|
-
opacity: 0
|
|
119
|
+
opacity: 0,
|
|
120
|
+
pointerEvents: 'none'
|
|
115
121
|
},
|
|
116
122
|
to: {
|
|
117
123
|
transform: `translateX(0) scale(1)`,
|
|
@@ -124,7 +130,8 @@ const fadeLeft = (rect) => {
|
|
|
124
130
|
return {
|
|
125
131
|
from: {
|
|
126
132
|
transform: `translateX(${x}px) scale(0.98)`,
|
|
127
|
-
opacity: 0
|
|
133
|
+
opacity: 0,
|
|
134
|
+
pointerEvents: 'none'
|
|
128
135
|
},
|
|
129
136
|
to: {
|
|
130
137
|
transform: `translateX(0) scale(1)`,
|
|
@@ -136,7 +143,8 @@ const grow = () => {
|
|
|
136
143
|
return {
|
|
137
144
|
from: {
|
|
138
145
|
transform: "scale(.8, .6)",
|
|
139
|
-
opacity: 0
|
|
146
|
+
opacity: 0,
|
|
147
|
+
pointerEvents: 'none'
|
|
140
148
|
},
|
|
141
149
|
to: {
|
|
142
150
|
transform: "scale(1)",
|
|
@@ -149,7 +157,8 @@ const zoom = () => {
|
|
|
149
157
|
from: {
|
|
150
158
|
transform: "scale(.8)",
|
|
151
159
|
transformOrigin: "center",
|
|
152
|
-
opacity: 0
|
|
160
|
+
opacity: 0,
|
|
161
|
+
pointerEvents: 'none'
|
|
153
162
|
},
|
|
154
163
|
to: {
|
|
155
164
|
transform: "scale(1)",
|
|
@@ -163,7 +172,8 @@ const zoomOver = () => {
|
|
|
163
172
|
from: {
|
|
164
173
|
transform: "scale(1.2)",
|
|
165
174
|
transformOrigin: "center",
|
|
166
|
-
opacity: 0
|
|
175
|
+
opacity: 0,
|
|
176
|
+
pointerEvents: 'none'
|
|
167
177
|
},
|
|
168
178
|
to: {
|
|
169
179
|
transform: "scale(1)",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"variants.cjs","sources":["../../src/Transition/variants.ts"],"sourcesContent":["\nconst getY = (rect?: DOMRect) =>\n rect ? Math.min(rect.height / 2, 40) : 20\n\nconst getX = (rect?: DOMRect) =>\n rect ? Math.min(rect.width / 2, 40) : 20\n\n\n\nexport const slideDown = (rect?: DOMRect) => {\n const y = getY(rect)\n\n return {\n from: {\n transform: `translateY(-${y}px)`,\n },\n to: {\n transform: `translateY(0)`,\n }\n }\n}\n\nexport const slideUp = (rect?: DOMRect) => {\n const y = getY(rect)\n\n return {\n from: {\n transform: `translateY(${y}px)`,\n },\n to: {\n transform: `translateY(0)`,\n }\n }\n}\n\nexport const slideRight = (rect?: DOMRect) => {\n const x = getX(rect)\n\n return {\n from: {\n transform: `translateX(-${x}px)`,\n },\n to: {\n transform: `translateX(0)`,\n }\n }\n}\n\nexport const slideLeft = (rect?: DOMRect) => {\n const x = getX(rect)\n\n return {\n from: {\n transform: `translateX(${x}px)`,\n },\n to: {\n transform: `translateX(0)`,\n }\n }\n}\n\nexport const scaleYDown = () => ({\n from: {\n transform: \"scaleY(0.8)\",\n opacity: 0,\n transformOrigin: \"top\"\n },\n to: {\n transform: \"scaleY(1)\",\n opacity: 1,\n transformOrigin: \"top\"\n }\n})\n\nexport const scaleYUp = () => ({\n from: {\n transform: \"scaleY(0.8)\",\n transformOrigin: \"bottom\",\n opacity: 0\n },\n to: {\n transform: \"scaleY(1)\",\n transformOrigin: \"bottom\",\n opacity: 1\n }\n})\n\nexport const fade = () => {\n return {\n from: {\n opacity: 0\n },\n to: {\n opacity: 1\n }\n }\n}\n\n\nexport const fadeDown = (rect?: DOMRect) => {\n const y = getY(rect)\n\n return {\n from: {\n transform: `translateY(-${y}px) scale(0.98)`,\n opacity: 0\n },\n to: {\n transform: `translateY(0) scale(1)`,\n opacity: 1\n }\n }\n}\n\nexport const fadeUp = (rect?: DOMRect) => {\n const y = getY(rect)\n\n return {\n from: {\n transform: `translateY(${y}px) scale(0.98)`,\n opacity: 0\n },\n to: {\n transform: `translateY(0) scale(1)`,\n opacity: 1\n }\n }\n}\n\nexport const fadeRight = (rect?: DOMRect) => {\n const x = getX(rect)\n\n return {\n from: {\n transform: `translateX(-${x}px) scale(0.98)`,\n opacity: 0\n },\n to: {\n transform: `translateX(0) scale(1)`,\n opacity: 1\n }\n }\n}\n\nexport const fadeLeft = (rect?: DOMRect) => {\n const x = getX(rect)\n\n return {\n from: {\n transform: `translateX(${x}px) scale(0.98)`,\n opacity: 0\n },\n to: {\n transform: `translateX(0) scale(1)`,\n opacity: 1\n }\n }\n}\n\nexport const grow = () => {\n return {\n from: {\n transform: \"scale(.8, .6)\",\n opacity: 0\n },\n to: {\n transform: \"scale(1)\",\n opacity: 1\n }\n }\n}\n\nexport const zoom = () => {\n return {\n from: {\n transform: \"scale(.8)\",\n transformOrigin: \"center\",\n opacity: 0\n },\n to: {\n transform: \"scale(1)\",\n transformOrigin: \"center\",\n opacity: 1\n }\n }\n}\n\nexport const zoomOver = () => {\n return {\n from: {\n transform: \"scale(1.2)\",\n transformOrigin: \"center\",\n opacity: 0\n },\n to: {\n transform: \"scale(1)\",\n transformOrigin: \"center\",\n opacity: 1\n }\n }\n}\n\nexport const collapseVertical = (rect: DOMRect) => {\n return {\n from: {\n maxHeight: \"0px\",\n overflow: \"hidden\"\n },\n to: {\n maxHeight: rect.height + \"px\",\n overflow: \"hidden\"\n }\n }\n}\n\n\nexport const collapseHorizontal = (rect: DOMRect) => {\n return {\n from: {\n width: \"0px\",\n overflow: \"hidden\"\n },\n to: {\n width: rect.width + \"px\",\n overflow: \"hidden\"\n }\n }\n}\n\n\n\n\n"],"names":[],"mappings":";;AACA,MAAM,IAAI,GAAG,CAAC,IAAc,KACxB,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,EAAE,CAAC,GAAG,EAAE;AAE7C,MAAM,IAAI,GAAG,CAAC,IAAc,KACxB,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,GAAG,CAAC,EAAE,EAAE,CAAC,GAAG,EAAE;AAIrC,MAAM,SAAS,GAAG,CAAC,IAAc,KAAI;AACxC,IAAA,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC;IAEpB,OAAO;AACH,QAAA,IAAI,EAAE;YACF,SAAS,EAAE,CAAA,YAAA,EAAe,CAAC,CAAA,GAAA,CAAK;AACnC,SAAA;AACD,QAAA,EAAE,EAAE;AACA,YAAA,SAAS,EAAE,CAAA,aAAA,CAAe;AAC7B;KACJ;AACL;AAEO,MAAM,OAAO,GAAG,CAAC,IAAc,KAAI;AACtC,IAAA,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC;IAEpB,OAAO;AACH,QAAA,IAAI,EAAE;YACF,SAAS,EAAE,CAAA,WAAA,EAAc,CAAC,CAAA,GAAA,CAAK;AAClC,SAAA;AACD,QAAA,EAAE,EAAE;AACA,YAAA,SAAS,EAAE,CAAA,aAAA,CAAe;AAC7B;KACJ;AACL;AAEO,MAAM,UAAU,GAAG,CAAC,IAAc,KAAI;AACzC,IAAA,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC;IAEpB,OAAO;AACH,QAAA,IAAI,EAAE;YACF,SAAS,EAAE,CAAA,YAAA,EAAe,CAAC,CAAA,GAAA,CAAK;AACnC,SAAA;AACD,QAAA,EAAE,EAAE;AACA,YAAA,SAAS,EAAE,CAAA,aAAA,CAAe;AAC7B;KACJ;AACL;AAEO,MAAM,SAAS,GAAG,CAAC,IAAc,KAAI;AACxC,IAAA,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC;IAEpB,OAAO;AACH,QAAA,IAAI,EAAE;YACF,SAAS,EAAE,CAAA,WAAA,EAAc,CAAC,CAAA,GAAA,CAAK;AAClC,SAAA;AACD,QAAA,EAAE,EAAE;AACA,YAAA,SAAS,EAAE,CAAA,aAAA,CAAe;AAC7B;KACJ;AACL;AAEO,MAAM,UAAU,GAAG,OAAO;AAC7B,IAAA,IAAI,EAAE;AACF,QAAA,SAAS,EAAE,aAAa;AACxB,QAAA,OAAO,EAAE,CAAC;AACV,QAAA,eAAe,EAAE;AACpB,KAAA;AACD,IAAA,EAAE,EAAE;AACA,QAAA,SAAS,EAAE,WAAW;AACtB,QAAA,OAAO,EAAE,CAAC;AACV,QAAA,eAAe,EAAE;AACpB;AACJ,CAAA;AAEM,MAAM,QAAQ,GAAG,OAAO;AAC3B,IAAA,IAAI,EAAE;AACF,QAAA,SAAS,EAAE,aAAa;AACxB,QAAA,eAAe,EAAE,QAAQ;AACzB,QAAA,OAAO,EAAE;
|
|
1
|
+
{"version":3,"file":"variants.cjs","sources":["../../src/Transition/variants.ts"],"sourcesContent":["\nconst getY = (rect?: DOMRect) =>\n rect ? Math.min(rect.height / 2, 40) : 20\n\nconst getX = (rect?: DOMRect) =>\n rect ? Math.min(rect.width / 2, 40) : 20\n\n\n\nexport const slideDown = (rect?: DOMRect) => {\n const y = getY(rect)\n\n return {\n from: {\n transform: `translateY(-${y}px)`,\n },\n to: {\n transform: `translateY(0)`,\n }\n }\n}\n\nexport const slideUp = (rect?: DOMRect) => {\n const y = getY(rect)\n\n return {\n from: {\n transform: `translateY(${y}px)`,\n },\n to: {\n transform: `translateY(0)`,\n }\n }\n}\n\nexport const slideRight = (rect?: DOMRect) => {\n const x = getX(rect)\n\n return {\n from: {\n transform: `translateX(-${x}px)`,\n },\n to: {\n transform: `translateX(0)`,\n }\n }\n}\n\nexport const slideLeft = (rect?: DOMRect) => {\n const x = getX(rect)\n\n return {\n from: {\n transform: `translateX(${x}px)`,\n },\n to: {\n transform: `translateX(0)`,\n }\n }\n}\n\nexport const scaleYDown = () => ({\n from: {\n transform: \"scaleY(0.8)\",\n opacity: 0,\n pointerEvents: 'none',\n transformOrigin: \"top\"\n },\n to: {\n transform: \"scaleY(1)\",\n opacity: 1,\n transformOrigin: \"top\"\n }\n})\n\nexport const scaleYUp = () => ({\n from: {\n transform: \"scaleY(0.8)\",\n transformOrigin: \"bottom\",\n opacity: 0,\n pointerEvents: 'none'\n },\n to: {\n transform: \"scaleY(1)\",\n transformOrigin: \"bottom\",\n opacity: 1\n }\n})\n\nexport const fade = () => {\n return {\n from: {\n opacity: 0,\n pointerEvents: 'none'\n },\n to: {\n opacity: 1\n }\n }\n}\n\n\nexport const fadeDown = (rect?: DOMRect) => {\n const y = getY(rect)\n\n return {\n from: {\n transform: `translateY(-${y}px) scale(0.98)`,\n opacity: 0,\n pointerEvents: 'none'\n },\n to: {\n transform: `translateY(0) scale(1)`,\n opacity: 1\n }\n }\n}\n\nexport const fadeUp = (rect?: DOMRect) => {\n const y = getY(rect)\n\n return {\n from: {\n transform: `translateY(${y}px) scale(0.98)`,\n opacity: 0,\n pointerEvents: 'none'\n },\n to: {\n transform: `translateY(0) scale(1)`,\n opacity: 1\n }\n }\n}\n\nexport const fadeRight = (rect?: DOMRect) => {\n const x = getX(rect)\n\n return {\n from: {\n transform: `translateX(-${x}px) scale(0.98)`,\n opacity: 0,\n pointerEvents: 'none'\n },\n to: {\n transform: `translateX(0) scale(1)`,\n opacity: 1\n }\n }\n}\n\nexport const fadeLeft = (rect?: DOMRect) => {\n const x = getX(rect)\n\n return {\n from: {\n transform: `translateX(${x}px) scale(0.98)`,\n opacity: 0,\n pointerEvents: 'none'\n },\n to: {\n transform: `translateX(0) scale(1)`,\n opacity: 1\n }\n }\n}\n\nexport const grow = () => {\n return {\n from: {\n transform: \"scale(.8, .6)\",\n opacity: 0,\n pointerEvents: 'none'\n },\n to: {\n transform: \"scale(1)\",\n opacity: 1\n }\n }\n}\n\nexport const zoom = () => {\n return {\n from: {\n transform: \"scale(.8)\",\n transformOrigin: \"center\",\n opacity: 0,\n pointerEvents: 'none'\n },\n to: {\n transform: \"scale(1)\",\n transformOrigin: \"center\",\n opacity: 1\n }\n }\n}\n\nexport const zoomOver = () => {\n return {\n from: {\n transform: \"scale(1.2)\",\n transformOrigin: \"center\",\n opacity: 0,\n pointerEvents: 'none'\n },\n to: {\n transform: \"scale(1)\",\n transformOrigin: \"center\",\n opacity: 1\n }\n }\n}\n\nexport const collapseVertical = (rect: DOMRect) => {\n return {\n from: {\n maxHeight: \"0px\",\n overflow: \"hidden\"\n },\n to: {\n maxHeight: rect.height + \"px\",\n overflow: \"hidden\"\n }\n }\n}\n\n\nexport const collapseHorizontal = (rect: DOMRect) => {\n return {\n from: {\n width: \"0px\",\n overflow: \"hidden\"\n },\n to: {\n width: rect.width + \"px\",\n overflow: \"hidden\"\n }\n }\n}\n\n\n\n\n"],"names":[],"mappings":"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"}
|
package/Transition/variants.d.ts
CHANGED
|
@@ -34,6 +34,7 @@ declare const scaleYDown: () => {
|
|
|
34
34
|
from: {
|
|
35
35
|
transform: string;
|
|
36
36
|
opacity: number;
|
|
37
|
+
pointerEvents: string;
|
|
37
38
|
transformOrigin: string;
|
|
38
39
|
};
|
|
39
40
|
to: {
|
|
@@ -47,6 +48,7 @@ declare const scaleYUp: () => {
|
|
|
47
48
|
transform: string;
|
|
48
49
|
transformOrigin: string;
|
|
49
50
|
opacity: number;
|
|
51
|
+
pointerEvents: string;
|
|
50
52
|
};
|
|
51
53
|
to: {
|
|
52
54
|
transform: string;
|
|
@@ -57,6 +59,7 @@ declare const scaleYUp: () => {
|
|
|
57
59
|
declare const fade: () => {
|
|
58
60
|
from: {
|
|
59
61
|
opacity: number;
|
|
62
|
+
pointerEvents: string;
|
|
60
63
|
};
|
|
61
64
|
to: {
|
|
62
65
|
opacity: number;
|
|
@@ -66,6 +69,7 @@ declare const fadeDown: (rect?: DOMRect) => {
|
|
|
66
69
|
from: {
|
|
67
70
|
transform: string;
|
|
68
71
|
opacity: number;
|
|
72
|
+
pointerEvents: string;
|
|
69
73
|
};
|
|
70
74
|
to: {
|
|
71
75
|
transform: string;
|
|
@@ -76,6 +80,7 @@ declare const fadeUp: (rect?: DOMRect) => {
|
|
|
76
80
|
from: {
|
|
77
81
|
transform: string;
|
|
78
82
|
opacity: number;
|
|
83
|
+
pointerEvents: string;
|
|
79
84
|
};
|
|
80
85
|
to: {
|
|
81
86
|
transform: string;
|
|
@@ -86,6 +91,7 @@ declare const fadeRight: (rect?: DOMRect) => {
|
|
|
86
91
|
from: {
|
|
87
92
|
transform: string;
|
|
88
93
|
opacity: number;
|
|
94
|
+
pointerEvents: string;
|
|
89
95
|
};
|
|
90
96
|
to: {
|
|
91
97
|
transform: string;
|
|
@@ -96,6 +102,7 @@ declare const fadeLeft: (rect?: DOMRect) => {
|
|
|
96
102
|
from: {
|
|
97
103
|
transform: string;
|
|
98
104
|
opacity: number;
|
|
105
|
+
pointerEvents: string;
|
|
99
106
|
};
|
|
100
107
|
to: {
|
|
101
108
|
transform: string;
|
|
@@ -106,6 +113,7 @@ declare const grow: () => {
|
|
|
106
113
|
from: {
|
|
107
114
|
transform: string;
|
|
108
115
|
opacity: number;
|
|
116
|
+
pointerEvents: string;
|
|
109
117
|
};
|
|
110
118
|
to: {
|
|
111
119
|
transform: string;
|
|
@@ -117,6 +125,7 @@ declare const zoom: () => {
|
|
|
117
125
|
transform: string;
|
|
118
126
|
transformOrigin: string;
|
|
119
127
|
opacity: number;
|
|
128
|
+
pointerEvents: string;
|
|
120
129
|
};
|
|
121
130
|
to: {
|
|
122
131
|
transform: string;
|
|
@@ -129,6 +138,7 @@ declare const zoomOver: () => {
|
|
|
129
138
|
transform: string;
|
|
130
139
|
transformOrigin: string;
|
|
131
140
|
opacity: number;
|
|
141
|
+
pointerEvents: string;
|
|
132
142
|
};
|
|
133
143
|
to: {
|
|
134
144
|
transform: string;
|
package/Transition/variants.js
CHANGED
|
@@ -48,6 +48,7 @@ const scaleYDown = () => ({
|
|
|
48
48
|
from: {
|
|
49
49
|
transform: "scaleY(0.8)",
|
|
50
50
|
opacity: 0,
|
|
51
|
+
pointerEvents: 'none',
|
|
51
52
|
transformOrigin: "top"
|
|
52
53
|
},
|
|
53
54
|
to: {
|
|
@@ -60,7 +61,8 @@ const scaleYUp = () => ({
|
|
|
60
61
|
from: {
|
|
61
62
|
transform: "scaleY(0.8)",
|
|
62
63
|
transformOrigin: "bottom",
|
|
63
|
-
opacity: 0
|
|
64
|
+
opacity: 0,
|
|
65
|
+
pointerEvents: 'none'
|
|
64
66
|
},
|
|
65
67
|
to: {
|
|
66
68
|
transform: "scaleY(1)",
|
|
@@ -71,7 +73,8 @@ const scaleYUp = () => ({
|
|
|
71
73
|
const fade = () => {
|
|
72
74
|
return {
|
|
73
75
|
from: {
|
|
74
|
-
opacity: 0
|
|
76
|
+
opacity: 0,
|
|
77
|
+
pointerEvents: 'none'
|
|
75
78
|
},
|
|
76
79
|
to: {
|
|
77
80
|
opacity: 1
|
|
@@ -83,7 +86,8 @@ const fadeDown = (rect) => {
|
|
|
83
86
|
return {
|
|
84
87
|
from: {
|
|
85
88
|
transform: `translateY(-${y}px) scale(0.98)`,
|
|
86
|
-
opacity: 0
|
|
89
|
+
opacity: 0,
|
|
90
|
+
pointerEvents: 'none'
|
|
87
91
|
},
|
|
88
92
|
to: {
|
|
89
93
|
transform: `translateY(0) scale(1)`,
|
|
@@ -96,7 +100,8 @@ const fadeUp = (rect) => {
|
|
|
96
100
|
return {
|
|
97
101
|
from: {
|
|
98
102
|
transform: `translateY(${y}px) scale(0.98)`,
|
|
99
|
-
opacity: 0
|
|
103
|
+
opacity: 0,
|
|
104
|
+
pointerEvents: 'none'
|
|
100
105
|
},
|
|
101
106
|
to: {
|
|
102
107
|
transform: `translateY(0) scale(1)`,
|
|
@@ -109,7 +114,8 @@ const fadeRight = (rect) => {
|
|
|
109
114
|
return {
|
|
110
115
|
from: {
|
|
111
116
|
transform: `translateX(-${x}px) scale(0.98)`,
|
|
112
|
-
opacity: 0
|
|
117
|
+
opacity: 0,
|
|
118
|
+
pointerEvents: 'none'
|
|
113
119
|
},
|
|
114
120
|
to: {
|
|
115
121
|
transform: `translateX(0) scale(1)`,
|
|
@@ -122,7 +128,8 @@ const fadeLeft = (rect) => {
|
|
|
122
128
|
return {
|
|
123
129
|
from: {
|
|
124
130
|
transform: `translateX(${x}px) scale(0.98)`,
|
|
125
|
-
opacity: 0
|
|
131
|
+
opacity: 0,
|
|
132
|
+
pointerEvents: 'none'
|
|
126
133
|
},
|
|
127
134
|
to: {
|
|
128
135
|
transform: `translateX(0) scale(1)`,
|
|
@@ -134,7 +141,8 @@ const grow = () => {
|
|
|
134
141
|
return {
|
|
135
142
|
from: {
|
|
136
143
|
transform: "scale(.8, .6)",
|
|
137
|
-
opacity: 0
|
|
144
|
+
opacity: 0,
|
|
145
|
+
pointerEvents: 'none'
|
|
138
146
|
},
|
|
139
147
|
to: {
|
|
140
148
|
transform: "scale(1)",
|
|
@@ -147,7 +155,8 @@ const zoom = () => {
|
|
|
147
155
|
from: {
|
|
148
156
|
transform: "scale(.8)",
|
|
149
157
|
transformOrigin: "center",
|
|
150
|
-
opacity: 0
|
|
158
|
+
opacity: 0,
|
|
159
|
+
pointerEvents: 'none'
|
|
151
160
|
},
|
|
152
161
|
to: {
|
|
153
162
|
transform: "scale(1)",
|
|
@@ -161,7 +170,8 @@ const zoomOver = () => {
|
|
|
161
170
|
from: {
|
|
162
171
|
transform: "scale(1.2)",
|
|
163
172
|
transformOrigin: "center",
|
|
164
|
-
opacity: 0
|
|
173
|
+
opacity: 0,
|
|
174
|
+
pointerEvents: 'none'
|
|
165
175
|
},
|
|
166
176
|
to: {
|
|
167
177
|
transform: "scale(1)",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"variants.js","sources":["../../src/Transition/variants.ts"],"sourcesContent":["\nconst getY = (rect?: DOMRect) =>\n rect ? Math.min(rect.height / 2, 40) : 20\n\nconst getX = (rect?: DOMRect) =>\n rect ? Math.min(rect.width / 2, 40) : 20\n\n\n\nexport const slideDown = (rect?: DOMRect) => {\n const y = getY(rect)\n\n return {\n from: {\n transform: `translateY(-${y}px)`,\n },\n to: {\n transform: `translateY(0)`,\n }\n }\n}\n\nexport const slideUp = (rect?: DOMRect) => {\n const y = getY(rect)\n\n return {\n from: {\n transform: `translateY(${y}px)`,\n },\n to: {\n transform: `translateY(0)`,\n }\n }\n}\n\nexport const slideRight = (rect?: DOMRect) => {\n const x = getX(rect)\n\n return {\n from: {\n transform: `translateX(-${x}px)`,\n },\n to: {\n transform: `translateX(0)`,\n }\n }\n}\n\nexport const slideLeft = (rect?: DOMRect) => {\n const x = getX(rect)\n\n return {\n from: {\n transform: `translateX(${x}px)`,\n },\n to: {\n transform: `translateX(0)`,\n }\n }\n}\n\nexport const scaleYDown = () => ({\n from: {\n transform: \"scaleY(0.8)\",\n opacity: 0,\n transformOrigin: \"top\"\n },\n to: {\n transform: \"scaleY(1)\",\n opacity: 1,\n transformOrigin: \"top\"\n }\n})\n\nexport const scaleYUp = () => ({\n from: {\n transform: \"scaleY(0.8)\",\n transformOrigin: \"bottom\",\n opacity: 0\n },\n to: {\n transform: \"scaleY(1)\",\n transformOrigin: \"bottom\",\n opacity: 1\n }\n})\n\nexport const fade = () => {\n return {\n from: {\n opacity: 0\n },\n to: {\n opacity: 1\n }\n }\n}\n\n\nexport const fadeDown = (rect?: DOMRect) => {\n const y = getY(rect)\n\n return {\n from: {\n transform: `translateY(-${y}px) scale(0.98)`,\n opacity: 0\n },\n to: {\n transform: `translateY(0) scale(1)`,\n opacity: 1\n }\n }\n}\n\nexport const fadeUp = (rect?: DOMRect) => {\n const y = getY(rect)\n\n return {\n from: {\n transform: `translateY(${y}px) scale(0.98)`,\n opacity: 0\n },\n to: {\n transform: `translateY(0) scale(1)`,\n opacity: 1\n }\n }\n}\n\nexport const fadeRight = (rect?: DOMRect) => {\n const x = getX(rect)\n\n return {\n from: {\n transform: `translateX(-${x}px) scale(0.98)`,\n opacity: 0\n },\n to: {\n transform: `translateX(0) scale(1)`,\n opacity: 1\n }\n }\n}\n\nexport const fadeLeft = (rect?: DOMRect) => {\n const x = getX(rect)\n\n return {\n from: {\n transform: `translateX(${x}px) scale(0.98)`,\n opacity: 0\n },\n to: {\n transform: `translateX(0) scale(1)`,\n opacity: 1\n }\n }\n}\n\nexport const grow = () => {\n return {\n from: {\n transform: \"scale(.8, .6)\",\n opacity: 0\n },\n to: {\n transform: \"scale(1)\",\n opacity: 1\n }\n }\n}\n\nexport const zoom = () => {\n return {\n from: {\n transform: \"scale(.8)\",\n transformOrigin: \"center\",\n opacity: 0\n },\n to: {\n transform: \"scale(1)\",\n transformOrigin: \"center\",\n opacity: 1\n }\n }\n}\n\nexport const zoomOver = () => {\n return {\n from: {\n transform: \"scale(1.2)\",\n transformOrigin: \"center\",\n opacity: 0\n },\n to: {\n transform: \"scale(1)\",\n transformOrigin: \"center\",\n opacity: 1\n }\n }\n}\n\nexport const collapseVertical = (rect: DOMRect) => {\n return {\n from: {\n maxHeight: \"0px\",\n overflow: \"hidden\"\n },\n to: {\n maxHeight: rect.height + \"px\",\n overflow: \"hidden\"\n }\n }\n}\n\n\nexport const collapseHorizontal = (rect: DOMRect) => {\n return {\n from: {\n width: \"0px\",\n overflow: \"hidden\"\n },\n to: {\n width: rect.width + \"px\",\n overflow: \"hidden\"\n }\n }\n}\n\n\n\n\n"],"names":[],"mappings":"AACA,MAAM,IAAI,GAAG,CAAC,IAAc,KACxB,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,EAAE,CAAC,GAAG,EAAE;AAE7C,MAAM,IAAI,GAAG,CAAC,IAAc,KACxB,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,GAAG,CAAC,EAAE,EAAE,CAAC,GAAG,EAAE;AAIrC,MAAM,SAAS,GAAG,CAAC,IAAc,KAAI;AACxC,IAAA,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC;IAEpB,OAAO;AACH,QAAA,IAAI,EAAE;YACF,SAAS,EAAE,CAAA,YAAA,EAAe,CAAC,CAAA,GAAA,CAAK;AACnC,SAAA;AACD,QAAA,EAAE,EAAE;AACA,YAAA,SAAS,EAAE,CAAA,aAAA,CAAe;AAC7B;KACJ;AACL;AAEO,MAAM,OAAO,GAAG,CAAC,IAAc,KAAI;AACtC,IAAA,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC;IAEpB,OAAO;AACH,QAAA,IAAI,EAAE;YACF,SAAS,EAAE,CAAA,WAAA,EAAc,CAAC,CAAA,GAAA,CAAK;AAClC,SAAA;AACD,QAAA,EAAE,EAAE;AACA,YAAA,SAAS,EAAE,CAAA,aAAA,CAAe;AAC7B;KACJ;AACL;AAEO,MAAM,UAAU,GAAG,CAAC,IAAc,KAAI;AACzC,IAAA,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC;IAEpB,OAAO;AACH,QAAA,IAAI,EAAE;YACF,SAAS,EAAE,CAAA,YAAA,EAAe,CAAC,CAAA,GAAA,CAAK;AACnC,SAAA;AACD,QAAA,EAAE,EAAE;AACA,YAAA,SAAS,EAAE,CAAA,aAAA,CAAe;AAC7B;KACJ;AACL;AAEO,MAAM,SAAS,GAAG,CAAC,IAAc,KAAI;AACxC,IAAA,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC;IAEpB,OAAO;AACH,QAAA,IAAI,EAAE;YACF,SAAS,EAAE,CAAA,WAAA,EAAc,CAAC,CAAA,GAAA,CAAK;AAClC,SAAA;AACD,QAAA,EAAE,EAAE;AACA,YAAA,SAAS,EAAE,CAAA,aAAA,CAAe;AAC7B;KACJ;AACL;AAEO,MAAM,UAAU,GAAG,OAAO;AAC7B,IAAA,IAAI,EAAE;AACF,QAAA,SAAS,EAAE,aAAa;AACxB,QAAA,OAAO,EAAE,CAAC;AACV,QAAA,eAAe,EAAE;AACpB,KAAA;AACD,IAAA,EAAE,EAAE;AACA,QAAA,SAAS,EAAE,WAAW;AACtB,QAAA,OAAO,EAAE,CAAC;AACV,QAAA,eAAe,EAAE;AACpB;AACJ,CAAA;AAEM,MAAM,QAAQ,GAAG,OAAO;AAC3B,IAAA,IAAI,EAAE;AACF,QAAA,SAAS,EAAE,aAAa;AACxB,QAAA,eAAe,EAAE,QAAQ;AACzB,QAAA,OAAO,EAAE;
|
|
1
|
+
{"version":3,"file":"variants.js","sources":["../../src/Transition/variants.ts"],"sourcesContent":["\nconst getY = (rect?: DOMRect) =>\n rect ? Math.min(rect.height / 2, 40) : 20\n\nconst getX = (rect?: DOMRect) =>\n rect ? Math.min(rect.width / 2, 40) : 20\n\n\n\nexport const slideDown = (rect?: DOMRect) => {\n const y = getY(rect)\n\n return {\n from: {\n transform: `translateY(-${y}px)`,\n },\n to: {\n transform: `translateY(0)`,\n }\n }\n}\n\nexport const slideUp = (rect?: DOMRect) => {\n const y = getY(rect)\n\n return {\n from: {\n transform: `translateY(${y}px)`,\n },\n to: {\n transform: `translateY(0)`,\n }\n }\n}\n\nexport const slideRight = (rect?: DOMRect) => {\n const x = getX(rect)\n\n return {\n from: {\n transform: `translateX(-${x}px)`,\n },\n to: {\n transform: `translateX(0)`,\n }\n }\n}\n\nexport const slideLeft = (rect?: DOMRect) => {\n const x = getX(rect)\n\n return {\n from: {\n transform: `translateX(${x}px)`,\n },\n to: {\n transform: `translateX(0)`,\n }\n }\n}\n\nexport const scaleYDown = () => ({\n from: {\n transform: \"scaleY(0.8)\",\n opacity: 0,\n pointerEvents: 'none',\n transformOrigin: \"top\"\n },\n to: {\n transform: \"scaleY(1)\",\n opacity: 1,\n transformOrigin: \"top\"\n }\n})\n\nexport const scaleYUp = () => ({\n from: {\n transform: \"scaleY(0.8)\",\n transformOrigin: \"bottom\",\n opacity: 0,\n pointerEvents: 'none'\n },\n to: {\n transform: \"scaleY(1)\",\n transformOrigin: \"bottom\",\n opacity: 1\n }\n})\n\nexport const fade = () => {\n return {\n from: {\n opacity: 0,\n pointerEvents: 'none'\n },\n to: {\n opacity: 1\n }\n }\n}\n\n\nexport const fadeDown = (rect?: DOMRect) => {\n const y = getY(rect)\n\n return {\n from: {\n transform: `translateY(-${y}px) scale(0.98)`,\n opacity: 0,\n pointerEvents: 'none'\n },\n to: {\n transform: `translateY(0) scale(1)`,\n opacity: 1\n }\n }\n}\n\nexport const fadeUp = (rect?: DOMRect) => {\n const y = getY(rect)\n\n return {\n from: {\n transform: `translateY(${y}px) scale(0.98)`,\n opacity: 0,\n pointerEvents: 'none'\n },\n to: {\n transform: `translateY(0) scale(1)`,\n opacity: 1\n }\n }\n}\n\nexport const fadeRight = (rect?: DOMRect) => {\n const x = getX(rect)\n\n return {\n from: {\n transform: `translateX(-${x}px) scale(0.98)`,\n opacity: 0,\n pointerEvents: 'none'\n },\n to: {\n transform: `translateX(0) scale(1)`,\n opacity: 1\n }\n }\n}\n\nexport const fadeLeft = (rect?: DOMRect) => {\n const x = getX(rect)\n\n return {\n from: {\n transform: `translateX(${x}px) scale(0.98)`,\n opacity: 0,\n pointerEvents: 'none'\n },\n to: {\n transform: `translateX(0) scale(1)`,\n opacity: 1\n }\n }\n}\n\nexport const grow = () => {\n return {\n from: {\n transform: \"scale(.8, .6)\",\n opacity: 0,\n pointerEvents: 'none'\n },\n to: {\n transform: \"scale(1)\",\n opacity: 1\n }\n }\n}\n\nexport const zoom = () => {\n return {\n from: {\n transform: \"scale(.8)\",\n transformOrigin: \"center\",\n opacity: 0,\n pointerEvents: 'none'\n },\n to: {\n transform: \"scale(1)\",\n transformOrigin: \"center\",\n opacity: 1\n }\n }\n}\n\nexport const zoomOver = () => {\n return {\n from: {\n transform: \"scale(1.2)\",\n transformOrigin: \"center\",\n opacity: 0,\n pointerEvents: 'none'\n },\n to: {\n transform: \"scale(1)\",\n transformOrigin: \"center\",\n opacity: 1\n }\n }\n}\n\nexport const collapseVertical = (rect: DOMRect) => {\n return {\n from: {\n maxHeight: \"0px\",\n overflow: \"hidden\"\n },\n to: {\n maxHeight: rect.height + \"px\",\n overflow: \"hidden\"\n }\n }\n}\n\n\nexport const collapseHorizontal = (rect: DOMRect) => {\n return {\n from: {\n width: \"0px\",\n overflow: \"hidden\"\n },\n to: {\n width: rect.width + \"px\",\n overflow: \"hidden\"\n }\n }\n}\n\n\n\n\n"],"names":[],"mappings":"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"}
|