From 750da61587970c8700a9cf01ca7a3bd34b1ae571 Mon Sep 17 00:00:00 2001
From: Nikita Kiselev <kiselev2008@gmail.com>
Date: Wed, 24 Sep 2025 17:46:33 +0300
Subject: [PATCH] reat(design): add page transition animations

---
 spa/src/App.vue              | 32 +++++++++++++++++++++++++++++++-
 spa/src/ApplicationError.vue |  1 -
 spa/src/views/Product.vue    |  2 +-
 3 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/spa/src/App.vue b/spa/src/App.vue
index 03e00e7..61a90ad 100644
--- a/spa/src/App.vue
+++ b/spa/src/App.vue
@@ -1,7 +1,11 @@
 <template>
   <div class="app-container h-full">
     <FullscreenViewport v-if="platform === 'ios' || platform === 'android'"/>
-    <router-view/>
+    <RouterView v-slot="{ Component, route }">
+      <Transition name="route" mode="out-in" appear>
+        <component :is="Component" :key="route.fullPath" />
+      </Transition>
+    </RouterView>
     <CartButton/>
   </div>
 </template>
@@ -40,3 +44,29 @@ watch(
     {immediate: true}
 );
 </script>
+
+
+<style scoped>
+/* очень мягкий fade+slide */
+.route-enter-from,
+.route-leave-to {
+  opacity: 0;
+  transform: translateY(6px);
+}
+.route-enter-active,
+.route-leave-active {
+  transition: opacity .18s ease, transform .18s ease;
+}
+
+/* уважение к reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .route-enter-active,
+  .route-leave-active {
+    transition: opacity .12s linear;
+  }
+  .route-enter-from,
+  .route-leave-to {
+    transform: none;
+  }
+}
+</style>
diff --git a/spa/src/ApplicationError.vue b/spa/src/ApplicationError.vue
index e7ad6a2..9659589 100644
--- a/spa/src/ApplicationError.vue
+++ b/spa/src/ApplicationError.vue
@@ -9,7 +9,6 @@
       <p class="text-sm text-muted">Мы на перерыве, скоро всё снова заработает 🛠️</p>
     </div>
   </div>
-
 </template>
 
 <script setup>
diff --git a/spa/src/views/Product.vue b/spa/src/views/Product.vue
index aefe2f8..cdddcd4 100644
--- a/spa/src/views/Product.vue
+++ b/spa/src/views/Product.vue
@@ -113,8 +113,8 @@
         :activeIndex="initialFullScreenIndex"
         @close="closeFullScreen"
     />
+    <LoadingFullScreen v-if="isLoading"/>
   </div>
-  <LoadingFullScreen v-if="isLoading"/>
 </template>
 
 <script setup>