Контрактная анимация Div придает изменению непрозрачности ⇐ CSS

[Anonymous]

У меня есть простой див, который я расширяю и сжимаюсь, используя кнопку, которая вызывает функцию переключения. И я хочу иметь небольшую анимацию, которая длится 0,3 с, чтобы дать ощущение сокращения элемента. < /P>
Расширение работает отлично, но когда я сжимаю его, это дает ощущение элемента, потерявшего непрозрачность (хотя я не изменяю его). Есть советы о том, как изменить поведение?@if (IsTreeVisible)
{

Test
Test
Test
Test
Test
Test
Test

}
< /code>
cs: < /p>
protected async Task ToggleButtonClicked()
{
if (!IsTreeVisible)
{
IsTreeVisible = true;
IsTreeOpen = true;
StateHasChanged();
}
else {
IsTreeOpen = false;
await Task.Delay(300); // Wait for collapse animation
IsTreeVisible = false;
StateHasChanged();
}
}
< /code>
css: < /p>
.tree-container {
display: flex;
flex-direction: column;
gap: .3rem;
position: absolute;
z-index: 100;
background: white;
padding: 1.2rem;
width: 100%;
transform-origin: top;
animation-fill-mode: forwards;
overflow: hidden;
}

.tree-container.open {
animation: expandTree 0.3s ease forwards;

}

.tree-container.close {
animation: colapseTree 0.3s ease forwards;
}

@keyframes expandTree {
from {
clip-path: inset(0 0 100% 0);
}

to {
clip-path: inset(0 0 0 0);
}
}

@keyframes colapseTree {
from {
clip-path: inset(0 0 0 0);
}

to {
clip-path: inset(0 0 100% 0);
}
}


Подробнее здесь: https://stackoverflow.com/questions/797 ... appearance