To realize the animation effect from height:0 to height:auto in CSS, the following three methods can be adopted: 1. Use max-height to simulate height:auto, set a large enough value and cooperate with overflow:hidden and transition, which is suitable for fixed structure content; 2. Get scrollHeight dynamically set the height through JavaScript, set it to 0 first and then trigger the animation, which is suitable for content with large height changes; 3. Use transform or opacity to realize visual expansion animation, which does not affect the layout, and is suitable for performance-sensitive scenarios. Different methods are suitable for different needs. It is recommended to static content max-height, and it is recommended to use JS to control the height of dynamic content.

Sometimes you want to implement an animation effect from height: 0 to height: auto in CSS, such as expanding a hidden panel. But writing directly will find that the animation does not take effect or looks strange. The problem is that auto is a keyword, not a specific value, and the browser does not know how to "transition" to this value.

There are actually several reliable solutions. The following introduces several common practices and applicable scenarios.

Use max-height to simulate height: auto

This is the most commonly used and stable solution. Because we cannot directly use height: auto for animation, we can change it to max-height and set a large enough value to accommodate the content.

 .panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.panel.open {
  max-height: 500px; /* Set a reasonable upper limit*/
}

illustrate:

• Here max-height: 500px is just a "big enough" value to ensure that the content can be fully displayed.
• If you are not sure about the height of the content, you can estimate a little more value than the maximum possible (such as 1000px).
• The disadvantage is that if the actual content is much smaller than the set max-height , the animation speed may appear too fast.

suggestion:

• This method is very practical for contents with fixed structures (such as folding menus and prompt boxes).
• Not suitable for dynamic content with extremely high changes in height.

JavaScript dynamically obtain height and then animation

If you want to control the animation process more accurately, you can use JS to get the actual height of the element first, and then apply it to height .

 const panel = document.querySelector('.panel');
const height = panel.scrollHeight 'px';

panel.style.height = '0px';
panel.offsetHeight; // Force re-arrangement to ensure that the animation triggers panel.style.height = height;

Cooperate with CSS:

 .panel {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease-out;
}

illustrate:

• scrollHeight can obtain the height of the complete content of the element.
• After setting the initial height to 0, change it to the specific pixel value through JS, and the animation can be triggered smoothly.
• This method is more flexible and is also suitable for content with large changes in height.

suggestion:

• Used when precise animation control is required.
• Note that you must first set to 0, and then force a reorder (calling offsetHeight is one way), otherwise the browser may optimize the animation steps.

Use transform or opacity alternatives

If you just want the user to feel that the content is "expanded" and not necessarily changing the height, you can also consider other visual methods.

For example:

 .panel {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
  opacity: 0;
}

.panel.open {
  transform: scaleY(1);
  opacity: 1;
}

illustrate:

• This approach will not really change the layout, it is just a "visual animation".
• Suitable for situations where performance is sensitive or layout is complex.
• The disadvantage is that the true height of the element will not affect the page layout, which may lead to problems such as confusing scrolling positions.

suggestion:

• Use as an alternative, especially if there is no need to affect the document flow.
• The logic can be further processed in combination with JS listening animation end events.

Basically these common solutions. Each method has applicable scenarios, the key is whether you need real height changes, whether you rely on layout rearrangement, and the requirements for animation accuracy. If it is static content, it is recommended to use max-height ; if it is dynamic content, it is safer to use JS to obtain scrollHeight .

The above is the detailed content of How to animate CSS height from 0 to auto?. For more information, please follow other related articles on the PHP Chinese website!