feat(ui): FRO-35 Animations (#22)

Added animations for mainmenu

Co-authored-by: LQ63 <lkhermann@web.de>
Reviewed-on: #22
Co-authored-by: lq64 <lq@blackhole.local>
Co-committed-by: lq64 <lq@blackhole.local>

src/components/MainMenuBoxes.vue

@@ -39,12 +39,20 @@ const navigateTo = (routeName: string) => {
 </script>
 
 <template>
-  <div class="row q-col-gutter-md justify-center" style="width: 100%; max-width: 1000px;">
+  <transition-group
+    appear
+    enter-active-class="animate__animated animate__fadeIn"
+    leave-active-class="animate__animated animate__fadeOut"
 
+    tag="div"
+    class="row q-col-gutter-md justify-center"
+    style="width: 100%; max-width: 1000px;"
+  >
     <div
       v-for="(item, index) in menuItems"
       :key="index"
       class="col-12 col-sm-6 col-md-4"
+      :style="{ animationDuration: '1.6s', animationDelay: `${index * 0.3 + 0.5}s` }"
     >
       <q-card
         class="menu-card bg-dark text-white q-pa-sm cursor-pointer"
@@ -68,7 +76,7 @@ const navigateTo = (routeName: string) => {
         </q-card-section>
       </q-card>
     </div>
-  </div>
+  </transition-group>
 </template>
 
 <style scoped>
@@ -77,7 +85,6 @@ const navigateTo = (routeName: string) => {
   border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
-/* Hover-Effekt für die Karten */
 .menu-card:hover {
   transform: translateY(-5px);
   background-color: #2c3e50 !important;