feat: First View Transition integration (#333)

HugoRCD · Nov 25, 2024 · f098911 · f098911
1 parent f1494a6
commit f098911
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 16 deletions.
diff --git a/apps/shelve/app/components/project/MainSection.vue b/apps/shelve/app/components/project/MainSection.vue
@@ -101,11 +101,11 @@ function getProjectManager(manager: string) {
     <div v-if="!loading">
       <div class="flex items-start justify-between gap-4">
         <div class="flex items-start gap-4">
-          <UAvatar :src="project.logo" size="xl" :alt="project.name" />
+          <UAvatar :src="project.logo" size="xl" :alt="project.name" class="logo" />
           <div>
-            <h2 class="text-base font-semibold leading-7">
+            <h3 class="text-base font-semibold leading-7">
               {{ project.name }}
-            </h2>
+            </h3>
             <p class="text-sm leading-6 text-neutral-500">
               {{ project.description }}
             </p>
@@ -203,3 +203,17 @@ function getProjectManager(manager: string) {
     </UModal>
   </div>
 </template>
+
+<style scoped>
+.logo {
+  view-transition-name: project-logo;
+}
+
+h3 {
+  view-transition-name: project-name;
+}
+
+p {
+  view-transition-name: project-description;
+}
+</style>
diff --git a/apps/shelve/app/components/setting/ThemeToggle.vue b/apps/shelve/app/components/setting/ThemeToggle.vue
@@ -13,7 +13,7 @@ const switchTheme = () => {
   colorMode.preference = colorMode.value
 }
 
-function startViewTransition(theme) {
+const startViewTransition = (theme) => {
   if (theme === colorMode.value) return
   if (!document.startViewTransition) {
     switchTheme()
@@ -23,7 +23,16 @@ function startViewTransition(theme) {
     switchTheme()
     return
   }
-  document.startViewTransition(switchTheme)
+
+  document.documentElement.classList.add('theme-transitioning')
+
+  const transition = document.startViewTransition(() => {
+    switchTheme()
+  })
+
+  transition.finished.then(() => {
+    document.documentElement.classList.remove('theme-transitioning')
+  })
 }
 </script>
 
@@ -46,24 +55,25 @@ function startViewTransition(theme) {
 </template>
 
 <style>
-/* Dark/Light reveal effect */
-::view-transition-group(root) {
+.theme-transitioning::view-transition-group(root) {
   animation-duration: 1.5s;
 }
-::view-transition-new(root),
-::view-transition-old(root) {
+
+.theme-transitioning::view-transition-new(root),
+.theme-transitioning::view-transition-old(root) {
   mix-blend-mode: normal;
 }
 
-::view-transition-new(root) {
+.theme-transitioning::view-transition-new(root) {
   animation-name: reveal-light;
 }
 
-::view-transition-old(root),
-.dark::view-transition-old(root) {
+.theme-transitioning::view-transition-old(root),
+.dark.theme-transitioning::view-transition-old(root) {
   animation: none;
 }
-.dark::view-transition-new(root) {
+
+.dark.theme-transitioning::view-transition-new(root) {
   animation-name: reveal-dark;
 }
 
@@ -84,4 +94,5 @@ function startViewTransition(theme) {
     clip-path: polygon(130% 0, -30% 0, -15% 100%, 110% 115%);
   }
 }
+
 </style>
diff --git a/apps/shelve/app/pages/projects.vue b/apps/shelve/app/pages/projects.vue
@@ -9,6 +9,8 @@ const projects = useUserProjects()
 const { loading, fetchProjects } = useProjects()
 
 await fetchProjects()
+
+const active = useState('active-project')
 </script>
 
 <template>
@@ -35,19 +37,21 @@ await fetchProjects()
           :key="project.id"
           :to="`/project/${project.id}`"
         >
-          <UCard class="h-full">
+          <UCard class="h-full" @click.native="active = project.id">
             <div class="flex w-full items-start gap-4">
               <UAvatar
                 :src="project.logo"
                 :alt="project.name"
                 size="sm"
                 img-class="object-cover"
+                class="logo"
+                :class="{ active: active === project.id }"
               />
               <div class="flex flex-col gap-1">
-                <h3 class="flex flex-col text-lg font-semibold">
+                <h3 class="flex flex-col text-lg font-semibold" :class="{ active: active === project.id }">
                   {{ project.name }}
                 </h3>
-                <div class="text-xs font-normal text-neutral-500">
+                <div class="text-xs font-normal text-neutral-500" :class="{ active: active === project.id }">
                   {{ project.description }}
                 </div>
               </div>
@@ -61,3 +65,17 @@ await fetchProjects()
     </div>
   </div>
 </template>
+
+<style scoped>
+.logo.active {
+  view-transition-name: project-logo;
+}
+
+h3.active {
+  view-transition-name: project-name;
+}
+
+div.active {
+  view-transition-name: project-description;
+}
+</style>
diff --git a/apps/shelve/nuxt.config.ts b/apps/shelve/nuxt.config.ts
@@ -12,6 +12,10 @@ export default defineNuxtConfig({
     compatibilityVersion: 4,
   },
 
+  experimental: {
+    viewTransition: true,
+  },
+
   ssr: false,
 
   nitro: {