Smooth Transition of Dynamic Heights

Introduction

In this lab, we will explore how to smoothly transition an element's height from 0 to auto when its height is unknown. This technique is useful for creating dropdown menus, accordions, and other animated content. By using CSS transition, max-height, and overflow properties, as well as JavaScript to dynamically set the height value, we can create a seamless and visually appealing user experience.

Skills Graph

Height Transition

index.html and style.css have already been provided in the VM.

This code snippet transitions an element's height from 0 to auto when its height is unknown by performing the following steps:

• Use the transition property to specify that changes to max-height should be transitioned over a duration of 0.3s.
• Use the overflow property set to hidden to prevent the contents of the hidden element from overflowing its container.
• Use the max-height property to specify an initial height of 0.
• Use the :hover pseudo-class to change the max-height to the value of the --max-height variable set by JavaScript.
• Use the Element.scrollHeight property and CSSStyleDeclaration.setProperty() method to set the value of --max-height to the current height of the element.
• Note: This approach causes reflow on each animation frame, which may cause lag when there are a large number of elements below the transitioning element.

<div class="trigger">
  Hover over me to see a height transition.
  <div class="el">Additional content</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");

Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Summary

Congratulations! You have completed the Height Transition lab. You can practice more labs in LabEx to improve your skills.