Skip to content

Commit

Permalink
fix: double animation-fade-in (#7232)
Browse files Browse the repository at this point in the history
# Описание

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

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

# Изменения

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

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

Для решения проблемы пересечения имен в будущем будем хэшировать названия классов и кейфремов. В текущий момент требуется называть кейфреймы с префиксом компонента
  • Loading branch information
SevereCloud authored Jul 23, 2024
1 parent 6088bfe commit 8b50767
Show file tree
Hide file tree
Showing 2 changed files with 10 additions and 10 deletions.
16 changes: 8 additions & 8 deletions packages/vkui/src/components/Accordion/Accordion.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}

Expand All @@ -36,20 +36,20 @@
}

.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;
}
}

.AccordionContent__in--exited {
block-size: 0;
}

@keyframes animation-expand {
@keyframes animation-accordion-expand {
0% {
block-size: 0;
}
Expand All @@ -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);
}
Expand All @@ -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);
Expand All @@ -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);
Expand Down
4 changes: 2 additions & 2 deletions packages/vkui/src/components/ModalRoot/ModalRoot.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -48,7 +48,7 @@
box-sizing: border-box;
}

@keyframes animation-fade-in {
@keyframes animation-modalroot-fade-in {
from {
opacity: 0;
}
Expand Down

0 comments on commit 8b50767

Please sign in to comment.