Disable workshop page transition animation (#2395)

Author: Copilot

scripts/build-docs.test.js

@@ -58,6 +58,13 @@ test("workshop navigation constrains long buttons on small screens", () => {
   assert.ok(css.includes(".workshop-nav-btn {\n    box-sizing: border-box;\n    max-width: 100%;\n    width: 100%;"));
 });
 
+test("workshop page navigation does not animate page changes", () => {
+  const { html, css } = buildDocs();
+
+  assert.ok(!html.includes("startViewTransition"));
+  assert.ok(!css.includes("view-transition"));
+});
+
 test("current page checkpoint progress renders in the sticky header", () => {
   const { html, css, checkboxesJs } = buildDocs();
 

scripts/lib/docs.css

@@ -1278,43 +1278,3 @@ html[data-color-mode="dark"] .yaml-editor-block .code-copy-btn:hover {
   background-color: #161b22;
   color: #e6edf3;
 }
-
-/* ========================
-   CSS View Transitions
-   ======================== */
-@media (prefers-reduced-motion: no-preference) {
-  .markdown-body > details[open] {
-    view-transition-name: workshop-page;
-  }
-
-  @keyframes vt-slide-in-right {
-    from { opacity: 0; transform: translateX(48px); }
-    to   { opacity: 1; transform: translateX(0); }
-  }
-  @keyframes vt-slide-out-left {
-    from { opacity: 1; transform: translateX(0); }
-    to   { opacity: 0; transform: translateX(-48px); }
-  }
-  @keyframes vt-slide-in-left {
-    from { opacity: 0; transform: translateX(-48px); }
-    to   { opacity: 1; transform: translateX(0); }
-  }
-  @keyframes vt-slide-out-right {
-    from { opacity: 1; transform: translateX(0); }
-    to   { opacity: 0; transform: translateX(48px); }
-  }
-
-  ::view-transition-old(workshop-page) {
-    animation: 300ms cubic-bezier(0.4, 0, 1, 1) both vt-slide-out-left;
-  }
-  ::view-transition-new(workshop-page) {
-    animation: 300ms cubic-bezier(0, 0, 0.2, 1) both vt-slide-in-right;
-  }
-
-  html[data-nav-backward] ::view-transition-old(workshop-page) {
-    animation: 300ms cubic-bezier(0.4, 0, 1, 1) both vt-slide-out-right;
-  }
-  html[data-nav-backward] ::view-transition-new(workshop-page) {
-    animation: 300ms cubic-bezier(0, 0, 0.2, 1) both vt-slide-in-left;
-  }
-}

scripts/lib/page-template.js

@@ -167,12 +167,6 @@ ${htmlContent}</main>
       const activePage = page ?? workshopPages[0];
       if (!activePage) return;
 
-      const currentPage = workshopPages.find(p => p.open);
-      const currentIndex = currentPage ? workshopPages.indexOf(currentPage) : -1;
-      const nextIndex = workshopPages.indexOf(activePage);
-      const isBackward = currentIndex >= 0 && nextIndex >= 0 && currentIndex > nextIndex;
-      document.documentElement.toggleAttribute('data-nav-backward', isBackward);
-
       function applyPageChange() {
         workshopPages.forEach(candidate => {
           candidate.open = candidate === activePage;
@@ -188,11 +182,7 @@ ${htmlContent}</main>
         if (scrollPage) activePage.scrollIntoView({ block: 'start' });
       }
 
-      if (document.startViewTransition && currentPage && currentPage !== activePage) {
-        document.startViewTransition(applyPageChange);
-      } else {
-        applyPageChange();
-      }
+      applyPageChange();
     }
 
     function openDetailsAncestors(target) {