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/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">
-        KnockOutWhist
-      </h1>
+      <q-page class="flex justify-start items-center column q-pa-md">
+
+
+          <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>