Если указать высоту контента аккордеона auto, то перестает работать transition. Почему?

Question

[Snowfall_Zh]

const accBtn = document.querySelectorAll('.accordion_btn')
const accPanel = document.querySelectorAll('.accordion_panel')


for(let i = 0; i < accBtn.length; i++){
  accBtn[i].addEventListener('click', ()=>{
    accPanel[i].classList.toggle('active')
  })
}

<div class="accordion_wrapper">
            <div class="accordion">
                <button class="accordion_btn">Section 1</button>
                <div class="accordion_panel">
                    <p>
                        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nam blanditiis saepe est facilis, ratione illum, earum dolore amet suscipit facere at. Architecto, voluptatem! Modi voluptatum quam commodi, unde possimus dolorem.
                    </p>
                </div>
            </div>
            <div class="accordion">
                <button class="accordion_btn">Section 1</button>
                <div class="accordion_panel">
                    <p>
                        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum laborum mollitia at porro? Deserunt qui dolorem debitis eveniet nemo in? Enim excepturi dolores est deserunt eveniet fugiat temporibus, beatae officia?
                    </p>
                </div>
            </div>
            <div class="accordion">
                <button class="accordion_btn">Section 1</button>
                <div class="accordion_panel">
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel eligendi quisquam commodi. Tenetur ad, repellat corrupti sequi aut ipsam reiciendis magni necessitatibus eos esse alias? Sequi consequuntur odio distinctio temporibus.</p>
                </div>
            </div>
        </div>

.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 all;
            height: 0px;
        }
    
        .active{
            height: 120px;
            transition: .5s all;
        }
    }
}

Answer 1

[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пх.

Comments

[Snowfall_Zh]

Большое спасибо.

[IvanU7n]

ответ нейросети, таким темпом скоро здесь человеческих ответов не будет

[Aetae]

IvanU7n, ну на тупые вопросы нейросеть норм отвечает, проблема лишь в том, что и на другие вопросы она отвечает тупо, как, например, тут.

Snowfall_Zh, конечно ты можешь поступить как советует мистер нейросеть, проблема в том, что чаще всего ты не знаешь заранее какая будет нужна высота. И нормальное решение на данный момент тут только одно: высчитывать это значение с помощью js во время переключения. Самый простой вариант - использовать scrollHeight, но не универсальный.

Answer 2

[IvanU7n]

если кратко, то потому что auto не конкретное значение, а transition не умеет иначе

computed-value (как это по-русски?) у height: a percentage or auto or the absolute length, т.е. auto остаётся auto, а не превращается в пиксели (как хотелось бы)