fix: only apply view transition between search <-> index pages (#1222)

Author: danielroe

app/plugins/view-transitions.client.ts

@@ -0,0 +1,91 @@
+/**
+ * Scoped View Transitions plugin.
+ *
+ * Only triggers the View Transition API when navigating between `/` and `/search`
+ * (the search-box morph animation). All other navigations are left untouched so
+ * they feel instant.
+ */
+export default defineNuxtPlugin(nuxtApp => {
+  if (!document.startViewTransition) return
+
+  let transition: ViewTransition | undefined
+  let finishTransition: (() => void) | undefined
+  let hasUAVisualTransition = false
+
+  const resetTransitionState = () => {
+    transition = undefined
+    finishTransition = undefined
+    hasUAVisualTransition = false
+  }
+
+  // Respect browser-initiated visual transitions (e.g. swipe-back)
+  window.addEventListener('popstate', event => {
+    hasUAVisualTransition =
+      (event as PopStateEvent & { hasUAVisualTransition?: boolean }).hasUAVisualTransition ?? false
+    if (hasUAVisualTransition) {
+      transition?.skipTransition()
+    }
+  })
+
+  const router = useRouter()
+
+  router.beforeResolve(async (to, from) => {
+    if (to.matched.length === 0) return
+
+    const toPath = to.path
+    const fromPath = from.path
+
+    // Only transition between / and /search
+    if (!isSearchTransition(toPath, fromPath)) return
+
+    // Respect prefers-reduced-motion
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return
+
+    // Skip if browser already handled the visual transition
+    if (hasUAVisualTransition) return
+
+    const promise = new Promise<void>(resolve => {
+      finishTransition = resolve
+    })
+
+    let changeRoute: () => void
+    const ready = new Promise<void>(resolve => (changeRoute = resolve))
+
+    transition = document.startViewTransition(() => {
+      changeRoute!()
+      return promise
+    })
+
+    transition.finished.then(resetTransitionState)
+
+    await nuxtApp.callHook('page:view-transition:start', transition)
+
+    return ready
+  })
+
+  // Abort on errors
+  router.onError(() => {
+    finishTransition?.()
+    resetTransitionState()
+  })
+  nuxtApp.hook('app:error', () => {
+    finishTransition?.()
+    resetTransitionState()
+  })
+  nuxtApp.hook('vue:error', () => {
+    finishTransition?.()
+    resetTransitionState()
+  })
+
+  // Finish when page render completes
+  nuxtApp.hook('page:finish', () => {
+    finishTransition?.()
+    resetTransitionState()
+  })
+})
+
+/** Return true when navigating between `/` and `/search` (either direction). */
+function isSearchTransition(toPath: string, fromPath: string): boolean {
+  const paths = new Set([toPath, fromPath])
+  return paths.has('/') && paths.has('/search')
+}

nuxt.config.ts

@@ -128,7 +128,6 @@ export default defineNuxtConfig({
     entryImportMap: false,
     typescriptPlugin: true,
     viteEnvironmentApi: true,
-    viewTransition: true,
     typedPages: true,
   },