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

src/pages/calendar/TheCalendar.vue

@@ -24,15 +24,16 @@
       @selected-event="writeEventData",
       @delete-event="openModal"
     )
-    calendar-form-add-event(
-      v-if="isOpenForm",
-      :close-form="closeFormCreateEvent",
-      :owners-data="employeesData",
-      :selected-event-data="selectedEvent",
-      :event-types="eventTypes",
-      @clear-selected-event-data="clearSelectedEvent",
-      @close-change-form="setChangeFormState"
-    )
+    transition(name="form")
+      calendar-form-add-event(
+        v-if="isOpenForm",
+        :close-form="closeFormCreateEvent",
+        :owners-data="employeesData",
+        :selected-event-data="selectedEvent",
+        :event-types="eventTypes",
+        @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(
-      v-if="isOpenDescriptionCard",
-      :owner-event="ownerEvent",
-      :event-types="eventTypes",
-      @selected-event="transmitEventData",
-      @close-description-card="closeDescriptionCard",
-      @delete-event="transmitDeleteEvent",
-      :schedule-body-ref="scheduleBodyRef"
-    )
+    transition(name="description")        
+      calendar-event-description-card(
+        v-if="isOpenDescriptionCard",
+        :owner-event="ownerEvent",
+        :event-types="eventTypes",
+        @selected-event="transmitEventData",
+        @close-description-card="closeDescriptionCard",
+        @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)