LabEx
ВходРегистрация

Гладкий переход динамических высот

Beginner

This tutorial is from open-source community. Access the source code

Введение

В этом практическом занятии мы изучим, как гладко менять высоту элемента от 0 до auto, когда высота неизвестна. Эта техника полезна для создания выпадающих меню, аккордеонов и других анимированных элементов. Используя свойства CSS transition, max-height и overflow, а также JavaScript для динамического установки значения высоты, мы можем создать бесперебойный и визуально привлекательный пользовательский опыт.

Это Guided Lab, который предоставляет пошаговые инструкции, чтобы помочь вам учиться и практиковаться. Внимательно следуйте инструкциям, чтобы выполнить каждый шаг и получить практический опыт. Исторические данные показывают, что это лабораторная работа уровня начальный с процентом завершения 100%. Он получил 100% положительных отзывов от учащихся.

Переход высоты

В ВМ уже предоставлены index.html и style.css.

Этот фрагмент кода осуществляет переход высоты элемента от 0 до auto, когда высота неизвестна, выполняя следующие шаги:

  • Используйте свойство transition, чтобы указать, что изменения max-height должны осуществляться в течение 0,3 с.
  • Используйте свойство overflow, установив его в значение hidden, чтобы предотвратить выход содержимого скрытого элемента за пределы его контейнера.
  • Используйте свойство max-height, чтобы указать начальную высоту 0.
  • Используйте псевдо-класс :hover, чтобы изменить max-height на значение переменной --max-height, установленной с помощью JavaScript.
  • Используйте свойство Element.scrollHeight и метод CSSStyleDeclaration.setProperty(), чтобы установить значение --max-height равным текущей высоте элемента.
  • Примечание: этот подход вызывает переполнение на каждом кадре анимации, что может привести к лагам, когда есть большое количество элементов ниже элемента, который меняется.
<div class="trigger">
  Наведите курсор на меня, чтобы увидеть переход высоты.
  <div class="el">Дополнительное содержимое</div>
</div>

.el {
  transition: max-height 0.3s;
  overflow: hidden;
  max-height: 0;
}

.trigger:hover > .el {
  max-height: var(--max-height);
}

let el = document.querySelector(".el");
let height = el.scrollHeight;
el.style.setProperty("--max-height", height + "px");

Пожалуйста, нажмите кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем можно обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Резюме

Поздравляем! Вы завершили практическое занятие по переходу высоты. Вы можете выполнить больше практических занятий в LabEx, чтобы улучшить свои навыки.