@sigmela/router 0.2.6 → 0.2.7
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.
|
@@ -466,6 +466,9 @@ export const ScreenStack = /*#__PURE__*/memo(props => {
|
|
|
466
466
|
children: /*#__PURE__*/_jsx("div", {
|
|
467
467
|
ref: containerRef,
|
|
468
468
|
className: containerClassName + (animating ? ' animating' : ''),
|
|
469
|
+
style: {
|
|
470
|
+
'--stack-transition-time': `${transitionTime}ms`
|
|
471
|
+
},
|
|
469
472
|
children: keysToRender.map(key => {
|
|
470
473
|
const transitionState = stateMap.get(key);
|
|
471
474
|
if (!transitionState || !transitionState.isMounted) {
|
package/lib/module/styles.css
CHANGED
|
@@ -17,8 +17,10 @@
|
|
|
17
17
|
|
|
18
18
|
/* Base transition for opening screen */
|
|
19
19
|
transition:
|
|
20
|
-
transform
|
|
21
|
-
|
|
20
|
+
transform var(--stack-transition-time, 300ms)
|
|
21
|
+
cubic-bezier(0.22, 0.61, 0.36, 1),
|
|
22
|
+
filter var(--stack-transition-time, 300ms)
|
|
23
|
+
cubic-bezier(0.22, 0.61, 0.36, 1);
|
|
22
24
|
}
|
|
23
25
|
|
|
24
26
|
/* Inner container for regular screen */
|
|
@@ -43,6 +45,8 @@
|
|
|
43
45
|
pointer-events: none;
|
|
44
46
|
z-index: 1;
|
|
45
47
|
will-change: opacity;
|
|
48
|
+
transition: opacity var(--stack-transition-time, 300ms)
|
|
49
|
+
cubic-bezier(0.22, 0.61, 0.36, 1);
|
|
46
50
|
}
|
|
47
51
|
|
|
48
52
|
/* Show overlay only for modal-like presentations.
|
|
@@ -53,26 +57,6 @@
|
|
|
53
57
|
display: none;
|
|
54
58
|
}
|
|
55
59
|
|
|
56
|
-
/* Keyframes for overlay appearance */
|
|
57
|
-
@keyframes modal-overlay-enter {
|
|
58
|
-
from {
|
|
59
|
-
opacity: 0;
|
|
60
|
-
}
|
|
61
|
-
to {
|
|
62
|
-
opacity: 0.5;
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
/* Keyframes for overlay disappearance */
|
|
67
|
-
@keyframes modal-overlay-exit {
|
|
68
|
-
from {
|
|
69
|
-
opacity: 0.5;
|
|
70
|
-
}
|
|
71
|
-
to {
|
|
72
|
-
opacity: 0;
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
|
|
76
60
|
/* Overlay in initial state — transparent */
|
|
77
61
|
.screen-stack-item.modal.transition-preEnter > .stack-modal-overlay,
|
|
78
62
|
.screen-stack-item.modal-right.transition-preEnter > .stack-modal-overlay,
|
|
@@ -86,7 +70,7 @@
|
|
|
86
70
|
pointer-events: none;
|
|
87
71
|
}
|
|
88
72
|
|
|
89
|
-
/* Overlay on enter —
|
|
73
|
+
/* Overlay on enter — fade in via transition */
|
|
90
74
|
.screen-stack-item.modal.transition-entering > .stack-modal-overlay,
|
|
91
75
|
.screen-stack-item.modal.phase-active.transition-preEnter > .stack-modal-overlay,
|
|
92
76
|
.screen-stack-item.modal-right.transition-entering > .stack-modal-overlay,
|
|
@@ -103,7 +87,7 @@
|
|
|
103
87
|
.screen-stack-item.sheet.phase-active.transition-preEnter > .stack-modal-overlay {
|
|
104
88
|
background: rgba(0, 0, 0, 0.5);
|
|
105
89
|
pointer-events: none;
|
|
106
|
-
|
|
90
|
+
opacity: 0.5;
|
|
107
91
|
}
|
|
108
92
|
|
|
109
93
|
/* For modal-like in active / entered states — fully visible */
|
|
@@ -126,7 +110,7 @@
|
|
|
126
110
|
pointer-events: auto;
|
|
127
111
|
}
|
|
128
112
|
|
|
129
|
-
/* Overlay on modal-like close —
|
|
113
|
+
/* Overlay on modal-like close — fade out via transition */
|
|
130
114
|
.screen-stack-item.modal.phase-exiting > .stack-modal-overlay,
|
|
131
115
|
.screen-stack-item.modal.transition-exiting > .stack-modal-overlay,
|
|
132
116
|
.screen-stack-item.modal-right.phase-exiting > .stack-modal-overlay,
|
|
@@ -143,7 +127,7 @@
|
|
|
143
127
|
.screen-stack-item.sheet.transition-exiting > .stack-modal-overlay {
|
|
144
128
|
background: rgba(0, 0, 0, 0.5);
|
|
145
129
|
pointer-events: none;
|
|
146
|
-
|
|
130
|
+
opacity: 0;
|
|
147
131
|
}
|
|
148
132
|
|
|
149
133
|
/* Overlay for transparent-modal — transparent */
|