Modal Component added new animation fade-in and custom animations

src/components/Modal/Modal.scss

@@ -8,23 +8,43 @@
   }
 }
 
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
 .modal {
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100%;
-  top: -100%;
   pointer-events: none;
-  transition: opacity .1s ease-in;
   z-index: 100;
   opacity: 0;
 
+  &.slide-down {
+    top: -100%;
+  }
+
   &.open {
     pointer-events: all;
-    animation: slide-down ease-in .2s;
-    animation-fill-mode: forwards;
     opacity: 1;
+
+    &.slide-down {
+      animation: slide-down ease-in .2s;
+      animation-fill-mode: forwards;
+    }
+
+    &.fade-in {
+      animation: fade-in ease-in .2s;
+      animation-fill-mode: forwards;
+    }
   }
 
   // .modal__backdrop
@@ -57,8 +77,8 @@
     --button-size-sm: 24px;
 
     position: absolute;
-    top: 0;
-    right: 0;
+    top: 5px;
+    right: 5px;
     height: 24px;
 
     &:deep(.icon) {

src/components/Modal/Modal.vue

@@ -1,16 +1,21 @@
 <template>
   <Teleport to="body">
-    <div 
+    <div
       ref="modal"
       class="modal"
-      :class="{ 'open': open }"
+      :class="[
+        { open: open },
+        { 'slide-down': animation === 'slide-down' && !customAnimationClass },
+        { 'fade-in': animation === 'fade-in' && !customAnimationClass },
+        customAnimationClass,
+      ]"
       tabindex="0"
       @keydown.esc="closeHandler"
     >
       <div
         class="modal__backdrop"
-        @click="closeHandler">
-      </div>
+        @click="closeHandler"
+      ></div>
 
       <div class="modal__body">
         <Button
@@ -41,21 +46,40 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-})
 
-const emit = defineEmits(['update:open'])
+  /**
+   * Анимация [slide-down, fade-in]
+   */
+  animation: {
+    type: String,
+    default: 'slide-down',
+  },
+
+  /**
+   * Класс анимации
+   */
+  customAnimationClass: {
+    type: String,
+    default: null,
+  },
+});
+
+const emit = defineEmits(['update:open']);
 
 const closeHandler = () => {
   emit('update:open', false);
-}
+};
 
-watch(() => props.open, (bool) => {
-  if (bool) {
-    modal.value.focus();
+watch(
+  () => props.open,
+  (bool) => {
+    if (bool) {
+      modal.value.focus();
+    }
   }
-})
+);
 </script>
 
 <style scoped lang="scss">
 @use './Modal.scss';
-</style>
+</style>

stories/Modal.stories.js

@@ -6,6 +6,12 @@ export default {
   title: 'Elements/Modal',
   component: UiModal,
   tags: ['autodocs'],
+  argTypes: {
+    animation: {
+      control: 'select',
+      options: ['fade-in', 'slide-down'],
+    },
+  }
 };
 
 export const Base = {
@@ -28,3 +34,24 @@ export const Base = {
     `,
   }),
 };
+
+export const CustomAnimationEntryModal = {
+  render: (args) => ({
+    components: { UiModal, UiButton },
+    setup() {
+      return { args };
+    },
+    data() {
+      return {
+        isOpen: false,
+      };
+    },
+    template: `
+        <UiButton @click="isOpen = true">open modal</UiButton>
+
+        <UiModal v-bind="args" customAnimationClass="scale-in" v-model:open="isOpen">
+          <p style="text-align: center;">Place content here</p>
+        </UiModal>
+    `,
+  }),
+};

stories/assets/main.scss

@@ -16,4 +16,24 @@
   width: 100%;
   display: flex;
   justify-content: center;
+}
+
+@keyframes my-custom-animation-class {
+  0% {
+    transform: scale(0);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+.scale-in {
+  top: 0;
+  transform: scale(0);
+
+  &.open {
+    animation: my-custom-animation-class ease-in .2s;
+    animation-fill-mode: forwards;
+  }
 }