JavaScript修改子元素时父div过渡动画失效问题求助

问题根源 #

CSS 无法对 height: auto 执行平滑过渡，你当前给 .form 仅设置了 transform 过渡，完全没处理高度变化的过渡逻辑；直接修改内容会导致元素高度瞬间跳变，浏览器无法计算过渡所需的起始/结束值。

无需预计算高度的解决方法 #

利用 max-height 的过渡特性来模拟高度变化——不用精确计算文本高度，只要给一个足够大的 max-height 值覆盖所有可能的错误内容高度即可。

以下是修改后的完整代码：

HTML

<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
<div class="testbox">
  <div class="form" style="width: 100%;">
    <button onclick="expand()">expand</button>
    <p id="txt"></p>
  </div>
</div>

CSS

.testbox {
  min-height: 100vh; /* 确保容器占满视口高度，实现居中 */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px; /* 避免表单贴边 */
}

.form {
  max-width: 200px;
  padding: 20px;
  padding-bottom: 0;
  border-radius: 6px;
  background: #00aeffd0;
  max-height: 80px; /* 初始状态高度，刚好容纳无错误时的表单元素 */
  overflow: hidden; /* 过渡过程中隐藏超出区域的内容 */
  transition: max-height 0.5s ease-out; /* 对max-height应用过渡动画 */
}

/* 显示错误时触发的类 */
.form.has-error {
  max-height: 1000px; /* 足够大的值，覆盖所有可能的错误文本高度 */
}

JavaScript

function expand() {
  const errorElement = $('#txt');
  errorElement.html("LONGERTEXT<br>HIGHERTEXT<br>more error messages");
  $('.form').addClass('has-error'); // 添加类触发高度过渡
}

补充说明 #

• 初始的 max-height: 80px 可根据你无错误状态下的表单实际高度调整，确保刚好容纳按钮和表单元素，无多余空间。
• max-height: 1000px 只要大于你可能出现的最长错误文本高度即可，不用精确计算。
• overflow: hidden 是为了避免过渡过程中未完全展开的内容提前闪现。

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