srcdev-nuxt-components 9.1.14 → 9.1.15
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.
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
:class="[
|
|
6
6
|
elementClasses,
|
|
7
7
|
`tab-navigation--${navAlign}`,
|
|
8
|
-
{ 'is-collapsed': isCollapsed, 'is-loaded': isLoaded, 'menu-open': isMenuOpen },
|
|
8
|
+
{ 'is-collapsed': isCollapsed, 'is-loaded': isLoaded, 'menu-open': isMenuOpen, 'is-animated': isAnimated },
|
|
9
9
|
]"
|
|
10
10
|
aria-label="Site navigation"
|
|
11
11
|
>
|
|
@@ -106,6 +106,28 @@ const props = withDefaults(defineProps<Props>(), {
|
|
|
106
106
|
const { navRef, navListRef, isCollapsed, isLoaded, isMenuOpen, isActiveItem, toggleMenu, closeMenu } =
|
|
107
107
|
useNavCollapse("tab-nav-loaded");
|
|
108
108
|
|
|
109
|
+
// ─── Animation gate — disables indicator transitions during route changes ────
|
|
110
|
+
// Starts true: CSS anchor positioning resolves before first paint so there is
|
|
111
|
+
// no previous position to animate from on initial render.
|
|
112
|
+
// Uses flush:"pre" so isAnimated = false lands in the same DOM update as the
|
|
113
|
+
// is-active class moving — the browser never sees the anchor shift with
|
|
114
|
+
// transitions active.
|
|
115
|
+
const isAnimated = ref(true);
|
|
116
|
+
const route = useRoute();
|
|
117
|
+
|
|
118
|
+
watch(
|
|
119
|
+
() => route.path,
|
|
120
|
+
() => {
|
|
121
|
+
isAnimated.value = false;
|
|
122
|
+
requestAnimationFrame(() => {
|
|
123
|
+
requestAnimationFrame(() => {
|
|
124
|
+
isAnimated.value = true;
|
|
125
|
+
});
|
|
126
|
+
});
|
|
127
|
+
},
|
|
128
|
+
{ flush: "pre" }
|
|
129
|
+
);
|
|
130
|
+
|
|
109
131
|
const hoveredItemHref = ref<string | null>(null);
|
|
110
132
|
const showCollapsed = computed(() => isCollapsed.value && isLoaded.value);
|
|
111
133
|
|
|
@@ -426,13 +448,16 @@ watch(
|
|
|
426
448
|
bottom: 0;
|
|
427
449
|
opacity: 0;
|
|
428
450
|
pointer-events: none;
|
|
451
|
+
background: var(--tab-nav-decorator-hovered-bg, transparent);
|
|
452
|
+
border-radius: 4px;
|
|
453
|
+
z-index: 1;
|
|
454
|
+
}
|
|
455
|
+
|
|
456
|
+
.tab-navigation.is-animated .tab-nav-list .nav__hovered {
|
|
429
457
|
transition:
|
|
430
458
|
left 200ms ease,
|
|
431
459
|
right 200ms ease,
|
|
432
460
|
opacity 150ms ease;
|
|
433
|
-
background: var(--tab-nav-decorator-hovered-bg, transparent);
|
|
434
|
-
border-radius: 4px;
|
|
435
|
-
z-index: 1;
|
|
436
461
|
}
|
|
437
462
|
|
|
438
463
|
.tab-navigation .tab-nav-list:has(.is-hovered) .nav__hovered {
|
|
@@ -449,11 +474,14 @@ watch(
|
|
|
449
474
|
bottom: 0;
|
|
450
475
|
height: 2px;
|
|
451
476
|
pointer-events: none;
|
|
477
|
+
background-color: var(--tab-nav-decorator-indicator-color, var(--slate-01, currentColor));
|
|
478
|
+
z-index: 3;
|
|
479
|
+
}
|
|
480
|
+
|
|
481
|
+
.tab-navigation.is-animated .tab-nav-list .nav__active-indicator {
|
|
452
482
|
transition:
|
|
453
483
|
left 200ms ease,
|
|
454
484
|
right 200ms ease;
|
|
455
|
-
background-color: var(--tab-nav-decorator-indicator-color, var(--slate-01, currentColor));
|
|
456
|
-
z-index: 3;
|
|
457
485
|
}
|
|
458
486
|
/* } */
|
|
459
487
|
}
|