Почему трансформация scaleY не срабатывает в обратную сторону?

Question

[Bob Clapton]

На открытие срабатывает хорошо, а на закрытие нет, просто мгновенно схлопывает.

.submenu {
    width: 100%;
    @extend %list;
    max-height: 0;
    
    padding-left: 22px;
    padding-right: 46px;

    
    overflow-y: scroll;

    transform: scaleY(0);
    transition: transform 250ms linear;
    transform-origin: top center;

    &.submenu-open {
        transform: scaleY(1);
        transform-origin: top center;
        max-height: 300px;
    }
}

Answer 1

[Александр]

В приведенном коде, стили для элемента в закрытом состоянии не определены, и он остаётся невидимым (scaleY(0)) и не имеет возможности вернуться к первоначальному состоянию.

Вам следует добавить соответствующий класс для элемента в закрытом состоянии и задать ему нужные свойства и значения.

Например:

&.submenu-closed{
    transform: scaleY(0);
    max-height: 0;
}

Comments

[Bob Clapton]

У меня главное меню по такому принципу открывается и закрывается отлично.
А это (Субменю) почему-то не хочет, Мне кажется тут дело в высоте, если в закрытое состояние задать 300 меню открывается и закрывается нормально, только не схлопывается...