feat: opacity transition when 3d appear

adonisjs-community · Feb 28, 2024 · 9041f90 · 9041f90
1 parent 55dfa54
commit 9041f90
Showing 1 changed file with 5 additions and 1 deletion.
diff --git a/resources/components/hero.vue b/resources/components/hero.vue
@@ -37,7 +37,11 @@ import Button from '@/components/ui/button.vue'
 
         <model-viewer
           alt="AdonisJS 3d logo"
-          class="hidden h-110 flex-1"
+          class="hidden h-110 flex-1 transition-opacity duration-4000 ease-in-out"
+          :class="{
+            'opacity-0': modelViewerScriptLoaded.value === false,
+            'opacity-100': modelViewerScriptLoaded.value === true,
+          }"
           md="block"
           auto-rotate
           disable-zoom