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

src/pages/calendar/components/CalendarColumn.vue

@@ -13,6 +13,7 @@
         img.icon-wrapper.cursor-pointer(src="@/assets/icons/lock.svg")
       column-header-checkbox
     .body.pl-1
+      transition-group(name="card", tag="div")
         calendar-event-card(
           v-for="event in dayEvents",
           :key="event.id",
@@ -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: "СНИЛС",