[#127] add animation on event deleting

Author: Kreezag

src/shared/ui/preview-card/preview-card.vue

@@ -22,6 +22,7 @@ const isOptimized = ref(false);
 const isVisibleControls = ref(true);
 
 const eventRef = ref(null);
+const isDeleting = ref(false);
 const { events, lockedIds } = useEvents();
 
 const normalizedTags = computed(() => [
@@ -50,7 +51,15 @@ const changeVisibleControls = (value = true) => {
   isVisibleControls.value = value;
 };
 
-const deleteEvent = () => events?.removeById(props.event.id);
+const deleteEvent = () => {
+  isDeleting.value = true;
+
+  setTimeout(() => {
+    events?.removeById(props.event.id);
+
+    isDeleting.value = false;
+  }, 200);
+};
 
 const toggleEventLock = () => {
   if ((lockedIds?.items.value || []).includes(props.event.id)) {
@@ -127,7 +136,12 @@ onBeforeMount(() => {
 </script>
 
 <template>
-  <div :id="event.id" ref="eventRef" class="preview-card">
+  <div
+    :id="event.id"
+    ref="eventRef"
+    class="preview-card"
+    :class="{ 'preview-card--deleting': isDeleting }"
+  >
     <PreviewCardHeader
       class="preview-card__header"
       :event-url="eventUrl"
@@ -165,11 +179,11 @@ onBeforeMount(() => {
 </template>
 
 <style lang="scss" scoped>
-@keyframes new-event {
+@keyframes add-event {
   0% {
     opacity: 0;
     animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
-    pointer-events: none;
+    pointer-events: none; // NOTE: need to block event deleting to new events
   }
   100% {
     opacity: 1;
@@ -181,26 +195,29 @@ onBeforeMount(() => {
 .preview-card {
   @apply flex-grow flex flex-col p-2 lg:p-3 transition-colors dark:bg-gray-700;
 
+  animation: add-event 0.2s;
   &:hover {
     @apply bg-gray-50 dark:bg-gray-900;
   }
 }
 
+.preview-card--deleting {
+  @apply opacity-0 pointer-events-none;
+
+  transition: all 0.2s cubic-bezier(0.8, 0, 1, 1);
+}
+
 .preview-card__header {
   @apply w-full flex flex-row justify-between gap-y-3;
-
-  animation: new-event 0.4s;
 }
 
 .preview-card__body {
   @apply flex flex-col mt-2 lg:mt-3;
 
-  animation: new-event 0.2s;
+  animation: add-event 0.2s;
 }
 
 .preview-card__footer {
   @apply w-full flex flex-row justify-between mt-1 lg:mt-2 text-gray-400;
-
-  animation: new-event 0.4s;
 }
 </style>