6.8. Задание: добавление анимаций в проект Vue-Pizza

Реализованы три типа анимаций:

1. Fade анимация - для всплывающих окон и уведомлений
2. Slide анимация - для переходов между маршрутами
3. Scale анимация - для добавления ингредиентов в пиццу

Изменения:
- Создан файл transitions.scss с CSS-анимациями
- Добавлена анимация переходов между маршрутами в App.vue
- Добавлена fade-анимация для уведомления drag-and-drop в HomeView
- Добавлена scale-анимация для ингредиентов в PizzaCanvas
- Добавлена list-анимация для списка ингредиентов в IngredientsStep
- Исправлена проблема дублирования данных в БД
- Добавлена защита от параллельных загрузок данных
- Удалены избыточные комментарии и отладочные логи

Author: root

frontend/src/App.vue

@@ -1,12 +1,17 @@
 <template>
-  <RouterView />
+  <RouterView v-slot="{ Component, route }">
+    <Transition name="slide" mode="out-in">
+      <component :is="Component" :key="route.path" />
+    </Transition>
+  </RouterView>
 </template>
 
 <style lang="scss">
 @use "@/assets/scss/ds-system/ds-colors";
 @use "@/assets/scss/ds-system/ds-shadows";
 @use "@/assets/scss/ds-system/ds-typography";
 @import "@/assets/scss/app.scss";
+@import "@/assets/styles/transitions.scss";
 
 body {
   justify-content: center;

frontend/src/assets/styles/transitions.scss

@@ -0,0 +1,62 @@
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.slide-enter-active,
+.slide-leave-active {
+  transition: all 0.3s ease;
+}
+
+.slide-enter-from {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+.slide-leave-to {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+.scale-enter-active {
+  transition: all 0.3s ease;
+}
+
+.scale-enter-from {
+  opacity: 0;
+  transform: scale(0.5);
+}
+
+.scale-leave-active {
+  transition: all 0.2s ease;
+}
+
+.scale-leave-to {
+  opacity: 0;
+  transform: scale(0.8);
+}
+
+.list-enter-active,
+.list-leave-active {
+  transition: all 0.3s ease;
+}
+
+.list-enter-from {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+
+.list-leave-to {
+  opacity: 0;
+  transform: translateY(10px);
+}
+
+.list-move {
+  transition: transform 0.3s ease;
+}
+

frontend/src/modules/constructor/IngredientsStep.vue

@@ -9,7 +9,7 @@
           class="ingredients__drop-zone"
           @drop="handleIngredientDrop"
         >
-          <ul class="ingredients__list">
+          <TransitionGroup name="list" tag="ul" class="ingredients__list">
             <li v-for="ingredient in availableIngredients" :key="ingredient.id">
               <AppDrag
                 :data="ingredient"
@@ -25,7 +25,7 @@
                 />
               </AppDrag>
             </li>
-          </ul>
+          </TransitionGroup>
 
           <div v-if="isDragActive" class="drop-hint">
             Перетащите ингредиенты на пиццу или используйте счетчики

frontend/src/modules/constructor/PizzaCanvas.vue

@@ -22,23 +22,27 @@
         <div :class="['pizza', getPizzaFoundationClass()]">
           <div class="pizza__wrapper">
             <!-- Отображаем ингредиенты на пицце -->
-            <div
-              v-for="ingredient in visibleIngredients"
-              :key="`${ingredient.id}-${ingredient.count}`"
-              :class="[
-                'pizza__filling',
-                `pizza__filling--${ingredient.cssClass}`,
-                getIngredientModifier(ingredient.count),
-              ]"
-            />
+            <TransitionGroup name="scale">
+              <div
+                v-for="ingredient in visibleIngredients"
+                :key="`${ingredient.id}-${ingredient.count}`"
+                :class="[
+                  'pizza__filling',
+                  `pizza__filling--${ingredient.cssClass}`,
+                  getIngredientModifier(ingredient.count),
+                ]"
+              />
+            </TransitionGroup>
           </div>
         </div>
 
         <!-- Подсказка при перетаскивании -->
-        <div v-if="isDragOver" class="drop-hint">
-          <span v-if="isValidDrop">Отпустите, чтобы добавить ингредиент</span>
-          <span v-else>Этот ингредиент нельзя добавить на пиццу</span>
-        </div>
+        <Transition name="fade">
+          <div v-if="isDragOver" class="drop-hint">
+            <span v-if="isValidDrop">Отпустите, чтобы добавить ингредиент</span>
+            <span v-else>Этот ингредиент нельзя добавить на пиццу</span>
+          </div>
+        </Transition>
       </AppDrop>
     </div>
 

frontend/src/stores/cart.js

@@ -121,7 +121,8 @@ export const useCartStore = defineStore('cart', {
         this.misc = response.data
       } catch (error) {
         console.error('Ошибка загрузки дополнительных товаров:', error)
-        this.misc = []
+        const miscData = await import('@/mocks/misc.json')
+        this.misc = miscData.default
       }
     },
 

frontend/src/stores/pizza.js

@@ -25,7 +25,11 @@ export const usePizzaStore = defineStore('pizza', {
     ],
 
     loading: false,
-    error: null
+    error: null,
+    
+    dataLoaded: false,
+    
+    loadingPromise: null
   }),
 
   getters: {
@@ -158,28 +162,53 @@ export const usePizzaStore = defineStore('pizza', {
 
   actions: {
     async loadConstructorData() {
+      if (this.loadingPromise) {
+        return this.loadingPromise
+      }
+      
+      if (this.dataLoaded) {
+        return
+      }
+      
       this.loading = true
       this.error = null
 
-      try {
-        const [sizesRes, doughsRes, saucesRes, ingredientsRes] = await Promise.all([
-          sizesService.getAll(),
-          doughService.getAll(),
-          saucesService.getAll(),
-          ingredientsService.getAll()
-        ])
-
-        this.sizes = sizesRes.data
-        this.doughs = doughsRes.data
-        this.sauces = saucesRes.data
-        this.ingredients = ingredientsRes.data
-        
-      } catch (error) {
-        this.error = error.response?.data?.message || error.message
-        console.error('Ошибка загрузки данных конструктора:', error)
-      } finally {
-        this.loading = false
-      }
+      this.loadingPromise = (async () => {
+        try {
+          const [sizesRes, doughsRes, saucesRes, ingredientsRes] = await Promise.all([
+            sizesService.getAll(),
+            doughService.getAll(),
+            saucesService.getAll(),
+            ingredientsService.getAll()
+          ])
+
+          this.sizes = sizesRes.data
+          this.doughs = doughsRes.data
+          this.sauces = saucesRes.data
+          this.ingredients = ingredientsRes.data
+          this.dataLoaded = true
+          
+        } catch (error) {
+          this.error = error.response?.data?.message || error.message
+          console.error('Ошибка загрузки данных конструктора:', error)
+          
+          const doughData = await import('@/mocks/dough.json')
+          const sizesData = await import('@/mocks/sizes.json')
+          const saucesData = await import('@/mocks/sauces.json')
+          const ingredientsData = await import('@/mocks/ingredients.json')
+          
+          this.doughs = doughData.default
+          this.sizes = sizesData.default
+          this.sauces = saucesData.default
+          this.ingredients = ingredientsData.default
+          this.dataLoaded = true
+        } finally {
+          this.loading = false
+          this.loadingPromise = null
+        }
+      })()
+      
+      return this.loadingPromise
     },
 
     setPizzaName(name) {

frontend/src/views/HomeView.vue

@@ -60,9 +60,11 @@
     </form>
 
     <!-- Уведомление о drag-and-drop -->
-    <div v-if="isDraggingIngredient" class="drag-notification">
-      <p>💫 Перетащите ингредиент на пиццу для добавления</p>
-    </div>
+    <Transition name="fade">
+      <div v-if="isDraggingIngredient" class="drag-notification">
+        <p>💫 Перетащите ингредиент на пиццу для добавления</p>
+      </div>
+    </Transition>
 
     <!-- Debug панель (только в development) -->
     <div v-if="showDebugInfo" class="debug-panel">