From 7bb79b1f3d8df375c0f3eb5e73b092b7b04c0d3f Mon Sep 17 00:00:00 2001
From: Daniil Suvorov <severecloud@gmail.com>
Date: Tue, 23 Jul 2024 15:51:31 +0300
Subject: [PATCH] fix: double animation-fade-in (#7232)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# Описание

Перестала работать анимация подложки в ModalRoot

Оказалось что в #7083 добавилась анимация для аккордиона с названием `animation-fade-in` и перебило в модалках

# Изменения

Переименовал анимации

# Дополнительно

Для решения проблемы пересечения имен в будущем будем хэшировать названия классов и кейфремов. В текущий момент требуется называть кейфреймы с префиксом компонента
---
 .../components/Accordion/Accordion.module.css    | 16 ++++++++--------
 .../components/ModalRoot/ModalRoot.module.css    |  4 ++--
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/vkui/src/components/Accordion/Accordion.module.css b/packages/vkui/src/components/Accordion/Accordion.module.css
index 0751a0a068..c588597117 100644
--- a/packages/vkui/src/components/Accordion/Accordion.module.css
+++ b/packages/vkui/src/components/Accordion/Accordion.module.css
@@ -22,12 +22,12 @@
 }
 
 .AccordionContent__in--enter {
-  animation-name: animation-expand;
+  animation-name: animation-accordion-expand;
 }
 
 @media (--reduce-motion) {
   .AccordionContent__in--enter {
-    animation-name: animation-fade-in;
+    animation-name: animation-accordion-fade-in;
   }
 }
 
@@ -36,12 +36,12 @@
 }
 
 .AccordionContent__in--exit {
-  animation-name: animation-collapse;
+  animation-name: animation-accordion-collapse;
 }
 
 @media (--reduce-motion) {
   .AccordionContent__in--exit {
-    animation-name: animation-fade-out;
+    animation-name: animation-accordion-fade-out;
   }
 }
 
@@ -49,7 +49,7 @@
   block-size: 0;
 }
 
-@keyframes animation-expand {
+@keyframes animation-accordion-expand {
   0% {
     block-size: 0;
   }
@@ -58,7 +58,7 @@
     block-size: var(--vkui_internal--AccordionContent_height);
   }
 }
-@keyframes animation-collapse {
+@keyframes animation-accordion-collapse {
   0% {
     block-size: var(--vkui_internal--AccordionContent_height);
   }
@@ -67,7 +67,7 @@
     block-size: 0;
   }
 }
-@keyframes animation-fade-in {
+@keyframes animation-accordion-fade-in {
   0% {
     opacity: 0;
     block-size: var(--vkui_internal--AccordionContent_height);
@@ -83,7 +83,7 @@
     block-size: var(--vkui_internal--AccordionContent_height);
   }
 }
-@keyframes animation-fade-out {
+@keyframes animation-accordion-fade-out {
   0% {
     opacity: 1;
     block-size: var(--vkui_internal--AccordionContent_height);
diff --git a/packages/vkui/src/components/ModalRoot/ModalRoot.module.css b/packages/vkui/src/components/ModalRoot/ModalRoot.module.css
index 7f8b2a729d..9b6a143212 100644
--- a/packages/vkui/src/components/ModalRoot/ModalRoot.module.css
+++ b/packages/vkui/src/components/ModalRoot/ModalRoot.module.css
@@ -13,7 +13,7 @@
   background: rgba(0, 0, 0, 0.4);
   user-select: none;
   transition: opacity 167ms ease-out;
-  animation: animation-fade-in 0.32s ease;
+  animation: animation-modalroot-fade-in 0.32s ease;
 }
 
 .ModalRoot--touched .ModalRoot__mask {
@@ -48,7 +48,7 @@
   box-sizing: border-box;
 }
 
-@keyframes animation-fade-in {
+@keyframes animation-modalroot-fade-in {
   from {
     opacity: 0;
   }