如何使用CSS从height: 0;过渡到height: auto;

技术背景

在CSS中，直接从height: 0;过渡到height: auto;是不可行的，因为auto值被有意排除在CSS过渡规范之外。不过，有多种方法可以实现类似的效果，下面将介绍一些常见的解决方案。

实现步骤

1. 使用max-height替代height

设置一个足够大的max-height值，然后通过过渡max-height来实现高度变化效果。示例代码如下：

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

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

<div id="menu">
    <a>hover me</a>
    <ul id="list">
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
</div>

2. 使用scaleY变换

通过scaleY变换来模拟高度变化。示例代码如下：

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

<p>Hover This</p>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

3. 使用clip属性

通过clip属性来裁剪元素，实现过渡效果。示例代码如下：

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);
}

<h3>Hover here</h3>
<ul>
  <li>This list</li>
  <li>is clipped.</li>
  <li>A clip transition</li>
  <li>will show it</li>
</ul>
<p>
  Some text...
</p>

4. 使用JavaScript计算高度

结合JavaScript计算元素内容的高度，然后通过过渡height来实现效果。示例代码如下：

window.toggleExpand = function(element) {
    if (!element.style.height || element.style.height == '0px') { 
        element.style.height = Array.prototype.reduce.call(element.childNodes, function(p, c) {return p + (c.offsetHeight || 0);}, 0) + 'px';
    } else {
        element.style.height = '0px';
    }
}

#menu #list {
    height: 0px;
    transition: height 0.3s ease;
    background: #d5d5d5;
    overflow: hidden;
}

<div id="menu">
    <input value="Toggle list" type="button" onclick="toggleExpand(document.getElementById('list'));">
    <ul id="list">
        <li>item</li>
        <li><div style="height: 100px; width: 100px; background: red;"></div></li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
</div>

5. 使用CSS Grid布局

通过过渡网格轨道大小来实现高度变化。示例代码如下：

#parent0 {
    display: grid;
    grid-template-rows: min-content 0fr;
    transition: grid-template-rows 500ms;
}
#child0 {   
    background-color: #dedede;
    overflow: hidden;
}
#parent0:hover{
    grid-template-rows: min-content 1fr;
}

<div id="parent0">
    <h1>Hover me</h1>
    <div id="child0">Some content
        <br>Some content
        <br>Some content
        <br>Some content
        <br>Some content
    </div>
</div>

6. 使用interpolate-size属性（Chrome支持）

使用新的CSS属性interpolate-size: allow-keywords实现过渡到height: auto。示例代码如下：

& {
    interpolate-size: allow-keywords;
}
#child0 {
    height: 0;
    overflow: hidden;
    background-color: #dedede;
    transition: height 1s ease;
}
#parent0:hover #child0 {
    height: auto;
}

<div id="parent0">
    <h1>Hover me (height: 0)</h1>
    <div id="child0">Some content
        <br>Some content
        <br>Some content
        <br>Some content
        <br>Some content
        <br>Some content
        <br>
    </div>
</div>

最佳实践

• 选择合适的方法：根据具体需求和浏览器兼容性选择合适的过渡方法。
• 避免硬编码值：尽量避免使用硬编码的高度值，以免内容变化时影响效果。
• 测试兼容性：在不同浏览器和设备上测试过渡效果，确保兼容性。

常见问题

• max-height值设置不当：如果max-height设置得太小，可能无法完全显示内容；如果设置得太大，过渡时间可能会过长。解决方法是根据内容的大致高度设置一个合适的max-height值。
• 过渡效果不流畅：可能是由于浏览器性能或过渡时间设置不当导致的。可以尝试调整过渡时间和过渡函数，或者使用硬件加速（如transform）来提高性能。
• 兼容性问题：某些方法可能在旧版本浏览器中不支持。可以使用浏览器前缀或提供备用方案来解决兼容性问题。