Проблема связана с тем, как браузеры обрабатывают анимацию перехода, вашем случае transition и значения height: auto.
Когда используешь transition для свойства height и изменяете его значение с фиксированного на auto, браузеру сложно анимировать это изменение. При переходе от фиксированного значения браузер не может плавно интерполировать все промежуточные значения, так как auto зависит от содержимого контейнера и его размера.
Поэтому, когда вы используете auto для height, переход может стать не плавным или даже отсутствовать, что в вашем случае, так как браузер не может анимировать изменение значения auto на определенное числовое значение.
Можете попробовать вместо использования height: auto использовать максимальное значение высоты, которое может достигнуть панель (например в 120пх как у вас и написано в ксс) и управлять отображением содержимого внутри с помощью других ксс, таких как visibility и opacity, чтобы добиться плавной анимации.
Мб попробовать сделать так:
.accordion_wrapper {
.accordion {
display: flex;
flex-direction: column;
width: 300px;
border: 2px solid #000;
overflow: hidden;
&_btn {
border: none;
cursor: pointer;
background-color: #cbcaf9;
height: 30px;
}
&_panel {
transition: .5s height, .5s visibility, .5s opacity;
height: 0px;
visibility: hidden;
opacity: 0;
}
.active {
height: 120px;
visibility: visible;
opacity: 1;
}
}
}
С использованием свойств visibility и opacity, вы сможете достичь плавной анимации даже при переключении между значениями высоты 0 и 120пх.
