srcdev-nuxt-components 9.1.13 → 9.1.15

package/app/components/02.molecules/navigation/site-navigation/SiteNavigation.vue

@@ -339,7 +339,9 @@ const { navRef, navListRef, isCollapsed, isLoaded, isMenuOpen, activeHref, isAct
       initNavDecorators();
       if (!hasFirstLayout) {
         hasFirstLayout = true;
-        nextTick(() => {
+        // RAF here (not nextTick) ensures the browser paints the snapped position
+        // before transitions are enabled — avoids animating from x=0 on first layout.
+        requestAnimationFrame(() => {
           isAnimated.value = true;
         });
       }
@@ -350,9 +352,12 @@ const { navRef, navListRef, isCollapsed, isLoaded, isMenuOpen, activeHref, isAct
     },
     onRouteChange: () => {
       isAnimated.value = false;
+      // Double RAF: RAF1 sets the new position and lets the browser paint it
+      // without transitions. RAF2 re-enables transitions only after that frame
+      // has committed — so there is no position delta left to animate.
       requestAnimationFrame(() => {
         initNavDecorators();
-        nextTick(() => {
+        requestAnimationFrame(() => {
           isAnimated.value = true;
         });
       });

package/app/components/02.molecules/navigation/tab-navigation/TabNavigation.vue

@@ -5,7 +5,7 @@
     :class="[
       elementClasses,
       `tab-navigation--${navAlign}`,
-      { 'is-collapsed': isCollapsed, 'is-loaded': isLoaded, 'menu-open': isMenuOpen },
+      { 'is-collapsed': isCollapsed, 'is-loaded': isLoaded, 'menu-open': isMenuOpen, 'is-animated': isAnimated },
     ]"
     aria-label="Site navigation"
   >
@@ -106,6 +106,28 @@ const props = withDefaults(defineProps<Props>(), {
 const { navRef, navListRef, isCollapsed, isLoaded, isMenuOpen, isActiveItem, toggleMenu, closeMenu } =
   useNavCollapse("tab-nav-loaded");
 
+// ─── Animation gate — disables indicator transitions during route changes ────
+// Starts true: CSS anchor positioning resolves before first paint so there is
+// no previous position to animate from on initial render.
+// Uses flush:"pre" so isAnimated = false lands in the same DOM update as the
+// is-active class moving — the browser never sees the anchor shift with
+// transitions active.
+const isAnimated = ref(true);
+const route = useRoute();
+
+watch(
+  () => route.path,
+  () => {
+    isAnimated.value = false;
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        isAnimated.value = true;
+      });
+    });
+  },
+  { flush: "pre" }
+);
+
 const hoveredItemHref = ref<string | null>(null);
 const showCollapsed = computed(() => isCollapsed.value && isLoaded.value);
 
@@ -426,13 +448,16 @@ watch(
     bottom: 0;
     opacity: 0;
     pointer-events: none;
+    background: var(--tab-nav-decorator-hovered-bg, transparent);
+    border-radius: 4px;
+    z-index: 1;
+  }
+
+  .tab-navigation.is-animated .tab-nav-list .nav__hovered {
     transition:
       left 200ms ease,
       right 200ms ease,
       opacity 150ms ease;
-    background: var(--tab-nav-decorator-hovered-bg, transparent);
-    border-radius: 4px;
-    z-index: 1;
   }
 
   .tab-navigation .tab-nav-list:has(.is-hovered) .nav__hovered {
@@ -449,11 +474,14 @@ watch(
     bottom: 0;
     height: 2px;
     pointer-events: none;
+    background-color: var(--tab-nav-decorator-indicator-color, var(--slate-01, currentColor));
+    z-index: 3;
+  }
+
+  .tab-navigation.is-animated .tab-nav-list .nav__active-indicator {
     transition:
       left 200ms ease,
       right 200ms ease;
-    background-color: var(--tab-nav-decorator-indicator-color, var(--slate-01, currentColor));
-    z-index: 3;
   }
   /* } */
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "9.1.13",
+  "version": "9.1.15",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",