srcdev-nuxt-components 9.1.12 → 9.1.14

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

@@ -116,6 +116,9 @@ const props = withDefaults(defineProps<Props>(), {
 // ─── Animation gate — prevents indicator from transitioning on first paint ───
 
 const isAnimated = ref(false);
+// Stays false until ResizeObserver confirms the nav has been laid out (stronger
+// guarantee than nextTick / RAF which don't ensure layout is complete).
+let hasFirstLayout = false;
 
 // ─── Nav decorators (active / hover indicators) ─────────────────────────────
 
@@ -334,6 +337,14 @@ const { navRef, navListRef, isCollapsed, isLoaded, isMenuOpen, activeHref, isAct
     onResize: async () => {
       await nextTick(); // wait for Vue to re-render after any isCollapsed change
       initNavDecorators();
+      if (!hasFirstLayout) {
+        hasFirstLayout = true;
+        // 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;
+        });
+      }
       if (isMenuOpen.value) {
         setFinalPanelActivePositions(true);
         setFinalPanelHoveredPositions(true);
@@ -341,18 +352,20 @@ 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;
         });
       });
     },
     onMounted: () => {
       initNavDecorators();
-      nextTick(() => {
-        isAnimated.value = true;
-      });
+      // isAnimated is set in onResize — ResizeObserver guarantees layout is
+      // complete before we enable transitions, unlike nextTick / RAF.
     },
   });
 

package/package.json

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