src/components/CodeView.vue

@@ -16,11 +16,17 @@ console.log(props.code)
 
 <template>
     <div class="code-view" v-if="show">
-        <CustomButton @click.stop="$emit('update:show', false)">Вернуться к сохранению сгенерированного кода</CustomButton>
+        <CustomButton
+            @click.stop="$emit('update:show', false)">
+            Вернуться к сохранению сгенерированного кода
+        </CustomButton>
         <pre>
             {{ code }}
         </pre>
-        <CustomButton @click.stop="$emit('update:show', false)">Вернуться к сохранению сгенерированного кода</CustomButton>
+        <CustomButton
+            @click.stop="$emit('update:show', false)">
+            Вернуться к сохранению сгенерированного кода
+        </CustomButton>
     </div>
 </template>
 
@@ -29,7 +35,6 @@ console.log(props.code)
     position: fixed;
     top: 0;
     left: 0;
-    //background-image: radial-gradient(#23aae3e2, #222222);
     background-color: #222222;
     overflow: auto;
     color: #eeeeee;

src/components/MyDialog.vue

@@ -1,12 +1,12 @@
 <template>
     <transition name="modal-fade">
-        <div class="modal-backdrop" v-if="show" @click.stop="$emit('update:show', false)">
+        <div class="modal-backdrop" v-if="show" @click.stop="onClose">
             <div class="modal" @click.stop>
                 <header :class="['modal-header', isSuccess ? 'modal-header-success' : 'modal-header-error']">
                     <slot name="header">
                         <strong>Заголовок по умолчанию</strong>
                     </slot>
-                    <button class="modal-btn-close" @click.stop="$emit('update:show', false)"
+                    <button class="modal-btn-close" @click.stop="onClose"
                         aria-label="Закрыть модальное окно">
                         ×
                     </button>
@@ -16,7 +16,7 @@
                 </section>
                 <footer :class="['modal-footer', isSuccess ? 'modal-footer-success' : 'modal-footer-error']">
                     <slot name="footer">
-                        <button @click.stop="$emit('update:show', false)">Закрыть</button>
+                        <button @click.stop="onClose">Закрыть</button>
                     </slot>
                 </footer>
             </div>
@@ -25,7 +25,13 @@
 </template>
 
 <script setup>
-const props = defineProps({
+import {defineEmits} from 'vue'
+
+const emit = defineEmits({
+    close: null,
+    'update:show': false,
+})
+defineProps({
     isSuccess: {
         type: Boolean,
         default: true,
@@ -35,6 +41,11 @@ const props = defineProps({
         default: false
     }
 })
+
+function onClose() {
+    emit('update:show')
+    emit('close')
+}
 </script>
 
 <style>
@@ -129,4 +140,32 @@ const props = defineProps({
     color: red;
     background: transparent;
 }
+
+/* Начало появления: ниже и прозрачный */
+.modal-fade-enter-from {
+    opacity: 0;
+    transform: translateY(20px);
+}
+/* Конец появления: на месте и видим */
+.modal-fade-enter-to {
+    opacity: 1;
+    transform: translateY(0);
+}
+/* Начало исчезания: на месте и видим */
+.modal-fade-leave-from {
+    opacity: 1;
+    transform: translateY(0);
+}
+/* Конец исчезания: выше и прозрачный */
+.modal-fade-leave-to {
+    opacity: 0;
+    transform: translateY(-20px);
+}
+
+/* Общие настройки анимации (скорость + плавность) */
+.modal-fade-enter-active,
+.modal-fade-leave-active {
+    transition: transform 0.7s cubic-bezier(.22,.9,.31,1), opacity 0.7s ease;
+    will-change: transform, opacity;
+}
 </style>

src/components/MyDropMenu.vue

@@ -24,7 +24,7 @@
                 </nav>
             </aside>
         </transition>
-        <MyDialog isSuccess v-model:show="isModalVisible">
+        <MyDialog isSuccess v-model:show="isModalVisible" @close="handleOkBtn">
             <template #header>
                 <strong>{{ infoCard.title }}</strong>
             </template>
@@ -34,8 +34,8 @@
             <template #footer>
                 <div class="navigation-wrapper__footer">
                     <custom-button :to="infoCard.hrefToCourse" title="Посмотреть на Stepik">Курс</custom-button>
-                    <custom-button :to="infoCard.hrefToDoc"
-                        title="Посмотреть в официальной документации">Документация</custom-button>
+                    <custom-button :to="infoCard.hrefToDoc" title="Посмотреть в официальной документации">Документация
+                    </custom-button>
                     <custom-button @click="handleOkBtn">ОК</custom-button>
                 </div>
             </template>
@@ -44,7 +44,7 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import {ref} from 'vue';
 import MyDialog from "@/components/MyDialog.vue";
 import CustomButton from '@/components/UI/CustomButton.vue'
 
@@ -56,6 +56,7 @@ function handleOkBtn() {
     isModalVisible.value = false
     isOpen.value = true
 }
+
 const toggleMenu = () => {
     isOpen.value = !isOpen.value;
 };
@@ -128,7 +129,7 @@ const links = [
 ]
 
 // Экспортируем методы, если захотим управлять меню извне
-defineExpose({ open: () => (isOpen.value = true), close: closeMenu });
+defineExpose({open: () => (isOpen.value = true), close: closeMenu});
 </script>
 
 <style scoped>
@@ -217,7 +218,7 @@ h1 {
 /* Анимации появления */
 .slide-enter-active,
 .slide-leave-active {
-    transition: transform 0.3s ease;
+    transition: transform 0.39s ease;
 }
 
 .slide-enter-from,
@@ -227,7 +228,7 @@ h1 {
 
 .fade-enter-active,
 .fade-leave-active {
-    transition: opacity 0.3s ease;
+    transition: opacity 0.39s ease;
 }
 
 .fade-enter-from,