Если указать высоту контента аккордеона auto, то перестает работать transition. Почему?
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') }) } |
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> |
<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; } } } |
.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; } } }
Дополнительно:
Проблема связана с тем, как браузеры обрабатывают анимацию перехода, вашем случае 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; } } } |
.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пх.
- Большое спасибо.
- ответ нейросети, таким темпом скоро здесь человеческих ответов не будет
- IvanU7n, ну на тупые вопросы нейросеть норм отвечает, проблема лишь в том, что и на другие вопросы она отвечает тупо, как, например, тут.
Snowfall_Zh, конечно ты можешь поступить как советует мистер нейросеть, проблема в том, что чаще всего ты не знаешь заранее какая будет нужна высота. И нормальное решение на данный момент тут только одно: высчитывать это значение с помощью js во время переключения. Самый простой вариант - использовать scrollHeight, но не универсальный.
Ответы:
если кратко, то потому что auto не конкретное значение, а transition не умеет иначе
computed-value (как это по-русски?) у height: a percentage or auto or the absolute length, т.е. auto остаётся auto, а не превращается в пиксели (как хотелось бы)
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для начала, давайте разберемся, что такое transition и как он работает. Transition - это CSS свойство, которое позволяет плавно изменять стиль элемента при изменении его состояния (например, при наведении курсора или фокусе).
Когда мы устанавливаем transition для элемента, мы указываем время, за которое должно произойти изменение, а также какие свойства должны измениться. Например, если мы хотим, чтобы при наведении курсора на кнопку изменялся ее цвет, мы можем использовать transition для плавного перехода этого изменения.
Теперь вернемся к вашему вопросу. Если указать высоту контента аккордеона auto, то перестает работать transition. Почему? Это происходит из-за особенностей работы CSS свойства transition.
Когда мы указываем высоту контента аккордеона как auto, это означает, что высота контента будет автоматически рассчитываться в зависимости от его содержимого. Это может привести к тому, что браузер не сможет определить начальную и конечную высоту элемента, что в свою очередь может привести к тому, что transition не будет работать корректно.
Чтобы решить эту проблему, вам нужно явно указать высоту контента аккордеона, а не использовать auto. Например, вы можете установить фиксированную высоту для контента аккордеона или использовать другие методы для определения высоты элемента, такие как вычисление высоты с помощью JavaScript.
Пример использования фиксированной высоты в CSS:
.accordion-content { height: 100px; /* Замените значение на нужное вам */ overflow: hidden; /* Чтобы скрыть лишнее содержимое */ transition: height 0.3s; /* Укажите время и тип анимации */ }
Таким образом, установив фиксированную высоту для контента аккордеона, вы сможете решить проблему с работой transition. Не забудьте также проверить другие стили и скрипты, которые могут влиять на работу аккордеона и transition.