WIP Начата анимация

src/components/TheHeader.vue

@@ -1,10 +1,11 @@
 <template lang="pug">
   .header-wrapper.relative.flex.justify-center.box-border.py-2.pl-4_75px.pr-6
-    base-client-form-create(
+    transition(name="form")
-      v-if="isOpenForm",
+      base-client-form-create(
-      :close-form="closeForm",
+        v-if="isOpenForm",
-      :set-updated-clients="setUpdatedClients",
+        :close-form="closeForm",
-    )
+        :set-updated-clients="setUpdatedClients",
+      )
     .flex.items-center.box-border.cursor-pointer.mr-auto
       img.logo-img.mr-29_25px(src="@/assets/images/logo.svg", alt="Logo")
       header-inputs
@@ -63,6 +64,25 @@ export default {
 </script>
 
 <style lang="sass" scoped>
+.form-enter-from
+  opacity: 0
+  transform: translateY(300px)
+  pointer-events: none
+
+.form-enter-active
+  transition: 0.5s ease
+
+.form-leave-to
+  opacity: 0
+  transform: translateY(300px)
+  pointer-events: none
+
+.form-leave-active
+  transition: 0.5s ease
+
+.form-move
+  transition: 0.5s ease
+
 .header-buttons
   outline: none
   border: none

src/components/base/BaseClientFormCreate.vue

@@ -1,5 +1,7 @@
 <template lang="pug">
-  .wrapper-create.flex.flex-col.fixed.right-6.bottom-6.px-4.py-7.gap-y-8(v-click-outside="closeModal")
+  .wrapper-create.flex.flex-col.fixed.right-6.bottom-6.px-4.py-7.gap-y-8(
+    v-click-outside="closeModal"
+  )
     .icon-cancel.close.absolute.top-5.right-5.cursor-pointer(@click="closeForm")
     span.title.text-xl.font-bold.px-4 Создание клиента
     .flex.gap-x-4.h-fit.px-4

src/pages/calendar/TheCalendar.vue

@@ -24,15 +24,16 @@
       @selected-event="writeEventData",
       @delete-event="openModal"
     )
-    calendar-form-add-event(
+    transition(name="form")
-      v-if="isOpenForm",
+      calendar-form-add-event(
-      :close-form="closeFormCreateEvent",
+        v-if="isOpenForm",
-      :owners-data="employeesData",
+        :close-form="closeFormCreateEvent",
-      :selected-event-data="selectedEvent",
+        :owners-data="employeesData",
-      :event-types="eventTypes",
+        :selected-event-data="selectedEvent",
-      @clear-selected-event-data="clearSelectedEvent",
+        :event-types="eventTypes",
-      @close-change-form="setChangeFormState"
+        @clear-selected-event-data="clearSelectedEvent",
-    )
+        @close-change-form="setChangeFormState"
+      )
     base-modal(
       v-model="showModal",
       title="Удаление события"
@@ -163,4 +164,23 @@ export default {
 <style lang="sass" scoped>
 .calendar-container
   width: calc(100vw - 80px)
+
+.form-enter-from
+  opacity: 0
+  transform: translateY(300px)
+  pointer-events: none
+
+.form-enter-active
+  transition: 0.5s ease
+
+.form-leave-to
+  opacity: 0
+  transform: translateY(300px)
+  pointer-events: none
+
+.form-leave-active
+  transition: 0.5s ease
+
+.form-move
+  transition: 0.5s ease
 </style>

src/pages/calendar/components/CalendarEventCard.vue

@@ -21,15 +21,16 @@
         .col
           ul
             li.mt-2(v-for="elem in descriptionColumns.rightColumn" :key="elem") {{ elem }}
-    calendar-event-description-card(
+    transition(name="description")        
-      v-if="isOpenDescriptionCard",
+      calendar-event-description-card(
-      :owner-event="ownerEvent",
+        v-if="isOpenDescriptionCard",
-      :event-types="eventTypes",
+        :owner-event="ownerEvent",
-      @selected-event="transmitEventData",
+        :event-types="eventTypes",
-      @close-description-card="closeDescriptionCard",
+        @selected-event="transmitEventData",
-      @delete-event="transmitDeleteEvent",
+        @close-description-card="closeDescriptionCard",
-      :schedule-body-ref="scheduleBodyRef"
+        @delete-event="transmitDeleteEvent",
-    )
+        :schedule-body-ref="scheduleBodyRef"
+      )
   </template>
 
 <script>
@@ -237,6 +238,25 @@ export default {
 </script>
 
 <style lang="sass" scoped>
+.description-enter-from
+  opacity: 0
+  transform: translateY(2px)
+  pointer-events: none
+
+.description-enter-active
+  transition: 0.5s ease
+
+.description-leave-to
+  opacity: 0
+  transform: translateY(2px)
+  pointer-events: none
+
+.description-leave-active
+  transition: 0.5s ease
+
+.description-move
+  transition: 0.5s ease
+
 .wrapper
   position: absolute
   width: calc(100% - 8px)

src/pages/clients/components/ClientsTableRow.vue

@@ -84,25 +84,26 @@
               :disabled-delete="!!deletedClientId && !rowOverlay",
               @delete-client="transmitDeleteClient"
             )
-      client-detail-info-wrapper.detail(
+      transition(name="detail")      
-        v-if="isOpenDetailInfo",
+        client-detail-info-wrapper.detail(
-        :data-address="dataAddress",
+          v-if="isOpenDetailInfo",
-        :data-detail="dataDetail",
+          :data-address="dataAddress",
-        :data-attachments="dataAttachments",
+          :data-detail="dataDetail",
-        :data-document="dataIdentityDocument",
+          :data-attachments="dataAttachments",
-        :save-new-doc="saveNewDoc",
+          :data-document="dataIdentityDocument",
-        :delete-doc="deleteDoc",
+          :save-new-doc="saveNewDoc",
-        :update-document="postUpdateIdentityDocument",
+          :delete-doc="deleteDoc",
-        :update-address="postUpdateAddress",
+          :update-document="postUpdateIdentityDocument",
-        :lack-data="lackData",
+          :update-address="postUpdateAddress",
-        :lack-address="lackAddress",
+          :lack-data="lackData",
-        :dope-address="dopeAddress",
+          :lack-address="lackAddress",
-        :lack-attachments="lackAttachments",
+          :dope-address="dopeAddress",
-        :create-address="postCreateAddress",
+          :lack-attachments="lackAttachments",
-        :create-document="postCreateIdentityDocument",
+          :create-address="postCreateAddress",
-        :address-id="addressId",
+          :create-document="postCreateIdentityDocument",
-        :doc-id="docId",
+          :address-id="addressId",
-      )
+          :doc-id="docId",
+        )
 </template>
 
 <script>
@@ -348,7 +349,7 @@ export default {
       addNotification(new Date().getTime(), title, message, "success", 5000);
     },
     addErrorNotification(title, message) {
-      addNotification(title, title, message, "error", 5000);
+      addNotification(title, title, message, "error", 0);
     },
     fetchClientDetail(id) {
       fetchWrapper
@@ -641,4 +642,18 @@ export default {
   color: var(--btn-blue-color)
 .countdown
   color: var(--font-grey-color )
+.detail-enter-from
+  opacity: 0
+  transform: translateY(-2px)
+  pointer-events: none
+.detail-enter-active
+  transition: 0.1s ease
+.detail-leave-to
+  opacity: 0
+  transform: translateY(-2px)
+  pointer-events: none
+.detail-leave-active
+  transition: 0.1s ease
+.detail-move
+  transition: 0.1s ease
 </style>