reat(design): add page transition animations

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>

spa/src/ApplicationError.vue

@@ -9,7 +9,6 @@
       <p class="text-sm text-muted">Мы на перерыве, скоро всё снова заработает 🛠️</p>
     </div>
   </div>
-
 </template>
 
 <script setup>

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>