如何在多页面应用(MPA)中实现元素滑下动画且无预显示空白？

别用跨文档视图过渡了，这玩意儿是做页面间整体切换动画的，根本不适合你要的局部错误提示滑入效果——它会提前渲染错误信息的占位空间，自然就出现空白了。换纯CSS过渡就能实现类似Svelte的滑下效果，还能推动下方表单字段，具体做法如下：

核心思路 #

利用max-height结合overflow:hidden实现高度过渡（直接过渡height:auto不生效），默认让错误信息容器高度为0，出错时通过添加类名让容器展开，同时过渡内边距、外边距这些属性，让动画更顺滑。

实现代码 #

HTML结构（后端返回出错页面时，给错误容器加active类） #

<form action="/submit" method="post">
  <div class="error-message active">
    邮箱格式不正确，请重新输入
  </div>
  <div class="form-field">
    <label for="email">邮箱</label>
    <input type="email" id="email" name="email">
  </div>
  <button type="submit">提交</button>
</form>

CSS样式 #

.error-message {
  max-height: 0;
  overflow: hidden;
  padding: 0 1rem;
  margin: 0 0 1rem;
  background-color: #fee2e2;
  color: #dc2626;
  border-radius: 0.375rem;
  transition: max-height 0.3s ease, padding 0.3s ease, margin 0.3s ease;
}

.error-message.active {
  max-height: 200px; /* 设置一个比实际错误信息高度大的值 */
  padding: 1rem;
  margin: 0 0 1rem;
}

.form-field {
  margin-bottom: 1rem;
}

为什么这么做 #

• 初始状态下max-height:0+overflow:hidden会把错误信息完全隐藏，不会预留任何空间，彻底避免空白。
• 添加active类后，max-height过渡到足够大的值，容器会平滑展开，同时padding和margin的过渡让动画更自然，下方的表单字段会被自动推下去。
• 不需要JS框架，后端返回页面时只需要给错误容器加上active类就行，完全适配MPA的开发模式。

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