From 9041f90b06c2e3a71a96555c427eb77bcb727c50 Mon Sep 17 00:00:00 2001
From: Julien Ripouteau <julien@ripouteau.com>
Date: Wed, 28 Feb 2024 20:10:22 +0100
Subject: [PATCH] feat: opacity transition when 3d appear

---
 resources/components/hero.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/resources/components/hero.vue b/resources/components/hero.vue
index 9c81bde..4396f64 100644
--- 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