Merge pull request #187 from dderbentsov/UC-157

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

src/components/TheHeader.vue

@@ -1,5 +1,6 @@
 <template lang="pug">
   .header-wrapper.relative.flex.justify-center.box-border.py-2.pl-4_75px.pr-6
+    transition(name="form")
       base-client-form-create(
         v-if="isOpenForm",
         :close-form="closeForm",
@@ -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,6 +24,7 @@
       @selected-event="writeEventData",
       @delete-event="openModal"
     )
+    transition(name="form")
       calendar-form-add-event(
         v-if="isOpenForm",
         :close-form="closeFormCreateEvent",
@@ -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,6 +21,7 @@
         .col
           ul
             li.mt-2(v-for="elem in descriptionColumns.rightColumn" :key="elem") {{ elem }}
+    transition(name="description")        
       calendar-event-description-card(
         v-if="isOpenDescriptionCard",
         :owner-event="ownerEvent",
@@ -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,6 +84,7 @@
               :disabled-delete="!!deletedClientId && !rowOverlay",
               @delete-client="transmitDeleteClient"
             )
+      transition(name="detail")      
         client-detail-info-wrapper.detail(
           v-if="isOpenDetailInfo",
           :data-address="dataAddress",
@@ -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>