LAVladis

Проблема связана с тем, как браузеры обрабатывают анимацию перехода, вашем случае 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пх.