@vectoriox/iox-builder 1.7.14 → 1.9.0
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.
|
@@ -83,6 +83,10 @@ const ROUTE_ANIMATION_OPTIONS = [
|
|
|
83
83
|
{ value: 'flip', label: 'Flip', description: 'Perspective tilt + fade' },
|
|
84
84
|
];
|
|
85
85
|
const EASING_OPTIONS$1 = [
|
|
86
|
+
// Strong symmetric in-out — the default. Slow to leave, quick through the middle, gentle to
|
|
87
|
+
// settle; this is what makes a long page transition read as smooth rather than sluggish.
|
|
88
|
+
{ label: 'Smooth (default)', value: 'cubic-bezier(0.76, 0, 0.24, 1)' },
|
|
89
|
+
{ label: 'Expo Out', value: 'cubic-bezier(0.16, 1, 0.3, 1)' },
|
|
86
90
|
{ label: 'Ease', value: 'ease' },
|
|
87
91
|
{ label: 'Ease In', value: 'ease-in' },
|
|
88
92
|
{ label: 'Ease Out', value: 'ease-out' },
|
|
@@ -112,8 +116,11 @@ function defaultPageSettings() {
|
|
|
112
116
|
routeAnimation: {
|
|
113
117
|
enter: 'fade',
|
|
114
118
|
leave: 'fade',
|
|
115
|
-
|
|
116
|
-
|
|
119
|
+
// Defaults mirror DEFAULT_PAGE_TRANSITION* in @vectoriox/iox-ui: the parallax look at a
|
|
120
|
+
// long duration with the smooth in-out curve.
|
|
121
|
+
transition: 'parallax-up',
|
|
122
|
+
duration: 1500,
|
|
123
|
+
easing: 'cubic-bezier(0.76, 0, 0.24, 1)',
|
|
117
124
|
},
|
|
118
125
|
};
|
|
119
126
|
}
|
|
@@ -1449,6 +1456,16 @@ class InteractionEngineService {
|
|
|
1449
1456
|
switch (ix.trigger) {
|
|
1450
1457
|
case 'pageLoad':
|
|
1451
1458
|
return this.attachPageLoad(node, ix, element);
|
|
1459
|
+
case 'pageEnter':
|
|
1460
|
+
// In the builder canvas there is no navigation, so preview a page-enter the same
|
|
1461
|
+
// way as page-load (pre-stated hidden → animate in). In production the SSR engine
|
|
1462
|
+
// fires it only after the page transition completes (ClientInteractionService).
|
|
1463
|
+
return this.attachPageLoad(node, ix, element);
|
|
1464
|
+
case 'pageLeave':
|
|
1465
|
+
// Exit choreography that plays on navigate-away. There is no navigation in the
|
|
1466
|
+
// builder, so it does not auto-fire (element stays visible) — the overlay play
|
|
1467
|
+
// button previews it via replay(). In production the orchestrator awaits it.
|
|
1468
|
+
return () => { };
|
|
1452
1469
|
case 'viewportEnter':
|
|
1453
1470
|
return this.attachViewportEnter(node, ix, element);
|
|
1454
1471
|
case 'click':
|
|
@@ -1890,6 +1907,8 @@ const INVERSE_ACTION = {
|
|
|
1890
1907
|
};
|
|
1891
1908
|
const TRIGGER_OPTIONS = [
|
|
1892
1909
|
{ value: 'pageLoad', label: 'Page load', icon: 'ph-thin ph-play' },
|
|
1910
|
+
{ value: 'pageEnter', label: 'Page enter', icon: 'ph-thin ph-sign-in' },
|
|
1911
|
+
{ value: 'pageLeave', label: 'Page leave', icon: 'ph-thin ph-sign-out' },
|
|
1893
1912
|
{ value: 'viewportEnter', label: 'Enter viewport', icon: 'ph-thin ph-eye' },
|
|
1894
1913
|
{ value: 'click', label: 'Click', icon: 'ph-thin ph-cursor-click' },
|
|
1895
1914
|
{ value: 'hover', label: 'Hover', icon: 'ph-thin ph-hand-pointing' },
|