Загрузка данных


/* ===== АНИМАЦИЯ РАЗВОРАЧИВАНИЯ ФОРМЫ ===== */
#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);
    }
}*/