/* ===== АНИМАЦИЯ РАЗВОРАЧИВАНИЯ ФОРМЫ ===== */
#formContent {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.4s ease,
margin-top 0.4s ease;
opacity: 0;
margin-top: 0;
pointer-events: none; /* ← Блокируем клики, когда скрыт */
}
#formContent.open {
max-height: 3000px; /* Достаточно большое значение для всей формы */
opacity: 1;
margin-top: 20px;
pointer-events: auto; /* ← Включаем клики, когда открыт */
}
/* Запчасти */
#partsContainer {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 10px;
/* === ДЛЯ ПЛАВНОЙ АНИМАЦИИ ВЫСОТЫ === */
max-height: 0; /* Начальная высота (скрыт) */
opacity: 0; /* Скрыт по умолчанию */
overflow: hidden; /* Обрезаем содержимое при анимации */
transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.3s ease,
margin-bottom 0.3s ease;
}
/* Когда есть хотя бы одна запчасть (видим) */
#partsContainer:not(:empty) {
max-height: 1000px; /* Достаточно большое значение */
opacity: 1;
}
#partsContainer:empty {
max-height: 0;
opacity: 0;
margin-bottom: 0; /* Чтобы отступ тоже схлопнулся */
}
.part-item {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
background: #222;
padding: 10px 14px;
border-radius: 12px;
border: 1px solid #2e2e2e;
margin-bottom: 10px;
/* Анимация */
animation: partFadeIn 0.3s ease forwards;
transform-origin: top center;
transition: opacity 0.3s ease, transform 0.3s ease, max-height 0.3s ease;
opacity: 1;
transform: scaleY(1);
max-height: 200px;
}
/*@keyframes partFadeIn {
from {
opacity: 0;
transform: scaleY(0.8) translateY(-10px);
}
to {
opacity: 1;
transform: scaleY(1) translateY(0);
}
}*/
/* Анимация при удалении */
.part-item.removing {
/*animation: partFadeOut 0.25s ease forwards;*/
opacity: 0;
transform: scaleY(0.8);
max-height: 0;
}
/*@keyframes partFadeOut {
from {
opacity: 1;
transform: scaleY(1) translateY(0);
}
to {
opacity: 0;
transform: scaleY(0.8) translateY(-10px);
}
}*/