Transitions with Dynamic Heights using CSS

Transitions are a powerful tool in CSS that allow you to smoothly change the properties of an element over time. However, when working with dynamic heights, such as transitioning from height: 0 to height: auto, things can get tricky.

The main issue is that auto is not a specific value that can be used in transitions. To overcome this limitation, you can use alternative approaches that achieve the same visual effect.

Using Max-Height

One common solution is to use max-height instead of height. By setting max-height to a value larger than the expected height of the element, you can create a smooth transition effect.

#menu #list {
  max-height: 0;
  transition: max-height 0.15s ease-out;
  overflow: hidden;
}

#menu:hover #list {
  max-height: 500px;
  transition: max-height 0.25s ease-in;
}

In this example, the max-height property is used to create a smooth transition effect when hovering over the #menu element.

Using ScaleY

Another approach is to use the scaleY property to scale the element’s height instead of changing its height property directly. This method can be useful when you want to maintain the element’s layout and avoid affecting its surrounding elements.

ul {
  background-color: #eee;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.26s ease;
}

p:hover ~ ul {
  transform: scaleY(1);
}

In this example, the scaleY property is used to scale the ul element’s height when hovering over the preceding p element.

Using Clip

A third approach is to use the clip property to clip the element’s content instead of changing its height property directly. This method can be useful when you want to create a more complex transition effect.

ul {
  clip: rect(auto, auto, 0, auto);
  position: absolute;
  margin: -1rem 0;
  padding: .5rem;

  color: white;

  background-color: rgba(0, 0, 0, 0.8);

  transition-property: clip;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

h3:hover ~ ul,
h3:active ~ ul,
ul:hover {
  clip: rect(auto, auto, 10rem, auto);
}

In this example, the clip property is used to create a smooth transition effect when hovering over the h3 element.

Conclusion

Transitions with dynamic heights can be challenging in CSS, but by using alternative approaches such as max-height, scaleY, or clip, you can achieve the desired visual effect. Remember to choose the method that best fits your use case and experiment with different values and properties to fine-tune your transition effects.