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>

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@quasar/extras": "^1.17.0",
         "@tsparticles/vue3": "~3.0.1",
+        "animate.css": "^4.1.1",
         "axios": "^1.13.2",
         "pinia": "^3.0.4",
         "quasar": "^2.18.6",
@@ -3272,6 +3273,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/animate.css": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz",
+      "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==",
+      "license": "MIT"
+    },
     "node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",

package.json

@@ -17,14 +17,15 @@
   },
   "dependencies": {
     "@quasar/extras": "^1.17.0",
-    "quasar": "^2.18.6",
-    "vue": "^3.5.25",
-    "vue-router": "^4.6.3",
-    "tsparticles": "~3.9.1",
     "@tsparticles/vue3": "~3.0.1",
+    "animate.css": "^4.1.1",
     "axios": "^1.13.2",
+    "pinia": "^3.0.4",
+    "quasar": "^2.18.6",
+    "tsparticles": "~3.9.1",
+    "vue": "^3.5.25",
     "vue-axios": "^3.5.2",
-    "pinia": "^3.0.4"
+    "vue-router": "^4.6.3"
   },
   "devDependencies": {
     "@quasar/vite-plugin": "^1.10.0",

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;

src/main.ts

@@ -12,7 +12,7 @@ import { createPinia } from 'pinia'
 import axios from 'axios'
 import VueAxios from 'vue-axios'
 import {useUserInfo} from "@/composables/useUserInfo.ts";
-
+import 'animate.css/animate.min.css';
 const app = createApp(App)
 const pinia = createPinia()
 

src/views/MainMenuView.vue

@@ -14,10 +14,26 @@ import UserStatusArea from '../components/User.vue'
     </q-header>
 
     <q-page-container>
-      <q-page class="flex justify-start items-center column q-pa-md"> <header class="text-center q-mb-xl q-mt-md"> <h1 class="game-title text-white q-my-none">
+      <q-page class="flex justify-start items-center column q-pa-md">
-        KnockOutWhist
+
-      </h1>
+
+          <header class="text-center q-mb-xl q-mt-md">
+            <transition
+              appear
+              enter-active-class="animate__fadeInDown"
+              leave-active-class="animate__fadeOutUp"
+            >
+              <div
+                class="animate__animated"
+                :style="{ animationDuration: '1.6s' }"
+              >
+          <h1 class="game-title text-white q-my-none">
+            KnockOutWhist
+          </h1>
+          </div>
+        </transition>
       </header>
+
         <router-view></router-view>
       </q-page>
     </q-page-container>