WIP Анимация карточек и переключателя календаря

src/pages/calendar/components/CalendarColumn.vue

@@ -13,19 +13,20 @@
         img.icon-wrapper.cursor-pointer(src="@/assets/icons/lock.svg")
       column-header-checkbox
     .body.pl-1
-      calendar-event-card(
-        v-for="event in dayEvents",
-        :key="event.id",
-        :id="event.id",
-        :ownerEvent="event",
-        :event-types="eventTypes",
-        :style="eventCardPosition(event.start, event.end)",
-        :change-form-was-closed="changeFormWasClosed",
-        @selected-event="transmitEventData",
-        @reset-change-form="transmitResetChangeForm",
-        @delete-event="transmitDeleteEvent",
-        :schedule-body-ref="scheduleBodyRef"
-      )
+      transition-group(name="card", tag="div")
+        calendar-event-card(
+          v-for="event in dayEvents",
+          :key="event.id",
+          :id="event.id",
+          :ownerEvent="event",
+          :event-types="eventTypes",
+          :style="eventCardPosition(event.start, event.end)",
+          :change-form-was-closed="changeFormWasClosed",
+          @selected-event="transmitEventData",
+          @reset-change-form="transmitResetChangeForm",
+          @delete-event="transmitDeleteEvent",
+          :schedule-body-ref="scheduleBodyRef"
+        )
 </template>
 
 <script>
@@ -132,4 +133,21 @@ export default {
 
 .owner-name
   color: var(--font-dark-blue-color)
+
+.card-enter-from
+  opacity: 0
+  pointer-events: none
+
+.card-enter-active
+  transition: 0.3s ease
+
+.card-leave-to
+  opacity: 0
+  pointer-events: none
+
+.card-leave-active
+  transition: 0.3s ease
+
+.card-move
+  transition: 0.3s ease
 </style>

src/pages/calendar/components/CalendarLayoutSwitch.vue

@@ -1,10 +1,10 @@
 <template lang="pug">
   .layout-switch-wrapper.inline-block
-    button#day.py-2.px-3(
+    button#day.py-2.px-3.transition.duration-200.ease-linear(
       :class="dayLayoutState",
       @click="changeSelectedLayout"
     ) День
-    button#week.py-2.px-3(
+    button#week.py-2.px-3.transition.duration-200.ease-linear(
       :class="weekLayoutState",
       @click="changeSelectedLayout"
     ) Неделя

src/pages/clients/components/ClientDetailInfoSection.vue

@@ -63,7 +63,7 @@
     transition(name="section", mode="out-in")
       .flex.justify-center.items-center(
         v-if="sectionDataPresence",
-        :style="{height: settings[section].voidHeight + 'px'}"
+        :style="{height: settings[section].voidHeight + 'px'}",
       )
         base-loader(
           :width="60",
@@ -72,6 +72,7 @@
       .section-body.flex.flex-col.gap-y-4.px-4(
         v-else-if="(this.isData || this.isAddress || this.isAttachments) && !isChange",
         :class="{'pt-3 pb-4': isData || isAddress || isAttachments}",
+        :style="{height: settings[section].voidHeight + 'px'}"
       )
         .flex.flex-col.gap-y-4
           .flex.flex-col(v-for="(item, key) in sectionInfo", class="gap-y-1.5")

src/pages/clients/utils/tableConfig.js

@@ -126,7 +126,7 @@ export const detail = {
       issued_by_date: "Дата",
     },
     width: 280,
-    voidHeight: 242,
+    voidHeight: 244,
   },
   snils: {
     title: "СНИЛС",