CSS 过渡自动高度不起作用的原因是无法对 "auto" 进行动画处理。通常的解决方法是对一个外层DIV的高度进行动画处理，该外层DIV只有一个无样式的DIV作为子元素，用于测量内容的高度。

具体的解决方法如下：

function growDiv() {
  var growDiv = document.getElementById('grow');
  if (growDiv.clientHeight) {
    growDiv.style.height = 0;
  } else {
    var wrapper = document.querySelector('.measuringWrapper');
    growDiv.style.height = wrapper.clientHeight + "px";
  }
}

#grow {
  -moz-transition: height .5s;
  -ms-transition: height .5s;
  -o-transition: height .5s;
  -webkit-transition: height .5s;
  transition: height .5s;
  height: 0;
  overflow: hidden;
  outline: 1px solid red;
}

  

    

      The contents of my div.
    
    

      The contents of my div.
    
    

      The contents of my div.
    
    

      The contents of my div.
    
    

      The contents of my div.
    
    

      The contents of my div.
    
  

这种方法比接受的答案更好。实际上，可能不需要 measuringWrapper 类。我使用类似下面的代码来检测要设置的高度：Array.from(growDiv.children).map(el => el.clientHeight).reduce((a, b) => a + b, 0)

这种方法可以实现高度的动画。谢谢。

CSS过渡自动高度不起作用的问题可能出现的原因是，当对象的scaleY为0时，DOM仍然保留了完整的高度。解决方法可以使用scaleY或clip来解决。使用scaleY时，可以将ul的transform属性设置为scaleY(0)，并在p元素的:hover状态下将transform属性设置为scaleY(1)。使用clip时，可以将ul的clip属性设置为rect(auto, auto, 0, auto)，并在h3元素的:hover状态下将clip属性设置为rect(auto, auto, 10rem, auto)。

以下是解决方法的代码示例：

使用scaleY：

ul {
  background-color: #eee;
  transform: scaleY(0);    
  transform-origin: top;
  transition: transform 0.3s ease-in-out;
}    
p:hover ~ ul {
  transform: scaleY(1);
}

Here (scaleY(1))

  
Coffee
  
Tea
  
Milk

使用clip：

ul {
  clip: rect(auto, auto, 0, auto);
  position: absolute;
  margin: 0;
  padding: .5rem;
  color: white;
  background-color: rgba(0, 0, 0, 0.8);
  transition-delay: 0.29s;
  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 {
  clip: rect(auto, auto, 10rem, auto);
}

Hover here

  
This list
  
is clipped.
  
A clip transition
  
will show it


  Some text...

此外，还有一种解决方法是使用max-height结合scale或translateY，以避免使用max-height在过渡顺序上出现的问题。这种方法可以在这里查看示例。

需要注意的是，clip属性已被废弃，但不会被淘汰。在CSS遮罩模块中，clip被弃用，推荐使用clip-path属性，但已经存在的clip属性不会消失。

在性能方面，使用scale而不是max-height是更好的选择。可以在Google开发者文档中的性能手册中了解到，使用will-change CSS设置可以提高性能。

CSS过渡自动高度不起作用的原因是，使用的是max-height而不是height进行过渡，并将max-height设置为比实际高度大的值。解决方法是将过渡属性从height改为max-height，并调整过渡的速度。

为了解决这个问题，可以使用以下CSS代码：

.ac-container section{
    ...
    max-height: 0px;
    ...
    transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;
}
.ac-container input:checked ~ section{
    ...
    transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear;
    ...
}
.ac-container input:checked ~ section.ac-small{
    max-height: 500px; /*auto*/
}

此外，还可以使用JavaScript来获取实际高度并将其设置为max-height的值。

此解决方法适用于从零到自动高度的过渡，而不是从自动高度到自动高度的过渡（即内容发生变化时）。

另外，有人认为使用flexbox布局会更好。