如何实现div高度过渡并自适应内容高度？

这个问题我太有共鸣了！固定高度的过渡动画确实没法适配动态内容，尤其是小屏幕下长文本溢出的问题特别头疼。咱们可以换个思路，用max-height替代固定height来实现自适应内容的平滑下滑效果，具体修改如下：

第一步：修改CSS样式 #

把原来基于height的过渡改成基于max-height，同时调整内边距让内容更美观：

.error-msg-block, .success-msg-block {
 display: none;
 background: #dc3545;
 color: #fff;
 border-radius: 2px;
 max-height: 0; /* 替换原有的height: 0 */
 font-weight: 400;
 margin: 8px 0 0;
 transition: max-height 0.6s ease-in; /* 过渡属性改为max-height */
 overflow: hidden;
 font-size: 85%;
}
.error-msg-block span, .success-msg-block span {
 display: inline-block;
 padding: 12px 20px; /* 上下左右都加内边距，避免内容贴边 */
}
/* 补充成功提示的背景色，原CSS里遗漏了 */
.success-msg-block {
 background: #28a745;
}

第二步：修改JavaScript显示函数 #

不再设置固定高度，而是通过修改max-height来触发过渡，同时添加状态重置避免多次调用异常：

let displayInfoMessage = function (message, messageType) {
 'use strict';
 let messageBlock = document.querySelector('#info-message-block');
 
 // 先重置状态，防止连续调用时动画错乱
 messageBlock.style.maxHeight = '0';
 messageBlock.style.display = 'none';
 
 // 设置提示内容和样式
 messageBlock.firstElementChild.textContent = message;
 messageBlock.className = messageType === 'error' ? 'error-msg-block' : 'success-msg-block';
 
 // 先显示元素，再触发过渡（延迟10ms确保浏览器渲染元素后再执行动画）
 messageBlock.style.display = 'block';
 setTimeout(function () {
 // 设置一个足够大的max-height，确保能容纳所有可能的提示内容
 messageBlock.style.maxHeight = '1000px';
 }, 10);
};

// 可选：添加隐藏提示框的函数，同样保持过渡效果
let hideInfoMessage = function () {
 let messageBlock = document.querySelector('#info-message-block');
 messageBlock.style.maxHeight = '0';
 // 等待过渡动画结束后再隐藏元素
 setTimeout(function () {
 messageBlock.style.display = 'none';
 }, 600);
};

为什么这样修改？ #

• max-height的优势：height过渡需要明确的起始和结束固定值，而max-height可以让元素根据内容自动计算实际高度，我们只需要给它设置一个足够大的上限值，过渡时就会平滑展开到内容的真实高度。
• 状态重置：每次调用显示函数前重置max-height和display，避免多次连续触发时出现动画异常（比如前一次动画还没结束就触发下一次）。
• 内边距调整：给span添加上下左右的内边距，让长文本在小屏幕下也有足够的留白，提升可读性。

内容的提问来源于stack exchange，提问作者user7500403