From ad78917e914444a0be4bf2a3c38846099d564e6e Mon Sep 17 00:00:00 2001
From: Ilia Miheev <imiheev774@gmail.com>
Date: Sun, 22 Mar 2026 14:05:38 +0300
Subject: [PATCH] =?UTF-8?q?=D0=A4=D0=B8=D0=BA=D1=81=20=D0=B1=D0=B0=D0=B3?=
 =?UTF-8?q?=D0=B0=20=D0=B8=20=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B8=D0=B5=20=D0=B0=D0=BD=D0=B8=D0=BC=D0=B0=D1=86=D0=B8?=
 =?UTF-8?q?=D0=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CodeView.vue   | 11 +++++---
 src/components/MyDialog.vue   | 47 ++++++++++++++++++++++++++++++++---
 src/components/MyDropMenu.vue | 15 +++++------
 3 files changed, 59 insertions(+), 14 deletions(-)

diff --git a/src/components/CodeView.vue b/src/components/CodeView.vue
index 983c728..9649103 100644
--- a/src/components/CodeView.vue
+++ b/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;
diff --git a/src/components/MyDialog.vue b/src/components/MyDialog.vue
index 68f556a..ad73a14 100644
--- a/src/components/MyDialog.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/components/MyDropMenu.vue b/src/components/MyDropMenu.vue
index 024a21c..97160d1 100644
--- a/src/components/MyDropMenu.vue
+++ b/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,