使用CSS max-height 实现可变高度内容的平滑展开动画

本教程详细介绍了如何解决css中 `height: auto` 无法直接动画的难题，通过巧妙利用 `max-height` 属性，结合 `transition` 和javascript类切换，实现内容在点击展开时的高度平滑过渡效果。文章将提供具体的css和javascript代码示例，并探讨关键的 `max-height` 值选择策略，以确保用户界面在内容显示时既能避免突兀的跳跃，又能消除不必要的空白间距。

理解 height: auto 动画的挑战

在Web开发中，我们经常需要实现点击展开或收缩内容的交互效果。一个常见的需求是让内容在显示时，其高度能够平滑地动画展开，而不是突然出现或消失。然而，直接对 height: auto 进行CSS transition 动画是不可能实现的，因为 auto 是一个不确定的值，CSS动画引擎无法计算其过渡路径。

传统的解决方案通常会遇到以下问题：

1. 使用 display: none 和 display: block： 这种方法虽然可以隐藏和显示内容并消除占位空间，但内容会瞬间“跳入”或“跳出”视图，缺乏平滑的视觉体验。
2. 仅使用 opacity 动画： 如果只通过改变 opacity 来显示内容，即使内容是透明的，它仍然会占据页面空间。这会导致在多行内容展开时，列表项之间出现不必要的空白间距，影响布局的紧凑性。

为了在保持布局紧凑性的同时实现平滑的动画效果，我们需要一种替代 height: auto 的策略。

解决方案核心：利用 max-height 实现平滑过渡

解决 height: auto 动画难题的关键在于使用 max-height 属性。max-height 可以从一个固定值过渡到另一个固定值，即使目标值远大于内容的实际高度。当 max-height 设置为一个足够大的值时，它会表现得像 height: auto 一样，允许内容占据其所需的全部高度。

立即学习“前端免费学习笔记（深入）”；

这种方法的原理是：

• 隐藏状态： 将 max-height 设置为一个较小的值（例如，内容一行的高度），同时将 opacity 设置为0，使内容不可见且不占据多余空间。
• 展开状态： 当内容需要显示时，通过添加一个类，将 max-height 切换到一个远大于内容实际可能高度的值（例如 100px 或 1000px），同时将 opacity 设置为1。
• 动画实现： 结合CSS transition 属性，max-height 和 opacity 的变化将以平滑动画的形式呈现。

实现步骤与代码示例

下面我们将通过一个具体的例子来演示如何实现这个效果。我们将创建一个可点击的列表，点击后列表项内的文本内容会平滑地展开和收缩。

可画AI

Canva可画魔力工作室，一站式AI智能设计工具平台

158

查看详情

1. HTML 结构

我们使用一个有序列表 (<ol>)，其中每个列表项 (<li>) 包含一个 <span> 元素来包裹可展开的文本内容。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<ol class="list-numbers list-numbers--reveal">
  <li><span>Lorem</span></li>
  <li><span>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></li>
  <li><span>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></li>
  <li><span>Duis aute irure</span></li>
</ol>

2. CSS 样式

CSS是实现动画效果的核心。我们将定义列表的基本样式，并为可展开的内容设置 opacity 和 max-height 的过渡。

.list-numbers {
  counter-reset: li; /* 用于生成列表序号 */
  line-height: 1.25;
  list-style: none;
}

.list-numbers li {
  display: flex;
  min-height: 24px;
  margin-bottom: 12px;
  position: relative;
  text-decoration: none;
  text-shadow: none;
}

/* 列表序号的样式 */
.list-numbers li:before {
  background: black;
  border-radius: 100%;
  color: white;
  content: counter(li);
  counter-increment: li;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
  height: 24px;
  line-height: 14px;
  margin-right: 8px;
  position: relative;
  top: -2px;
  width: 24px;
}

.list-numbers--reveal li {
  cursor: pointer; /* 提示用户可点击 */
}

/* 默认状态：内容隐藏，max-height 为一行高度 */
.list-numbers--reveal li span {
  opacity: 0;
  max-height: 25px; /* 初始max-height，略大于单行文本高度 */
  display: block; /* 确保max-height生效 */
  overflow: hidden; /* 隐藏超出max-height的内容 */
  /* 定义过渡效果，同时过渡 opacity 和 max-height */
  transition: all 1s ease; /* 动画速度为了演示调慢 */
  transition-property: opacity max-height;
}

/* .visible 类：内容展开，max-height 足够大 */
.list-numbers--reveal li.visible span {
  opacity: 1;
  max-height: 100px; /* 展开后的max-height，需确保大于任何可能的内容高度 */
}

关键样式说明：

• max-height: 25px; (默认状态): 这个值应该略大于单行文本的高度，以避免在初始状态下文本被截断，同时为动画提供一个起点。
• max-height: 100px; (.visible 状态): 这个值必须足够大，以确保无论内容有多少行，它都能完全显示。如果内容可能非常长，可以设置更大的值，如 500px 或 1000px。
• overflow: hidden;: 在 max-height 限制下，隐藏超出部分，确保内容不会溢出。
• transition: all 1s ease; transition-property: opacity max-height;: 定义了 opacity 和 max-height 属性在1秒内以 ease 缓动函数进行过渡。transition-property 明确指定了需要动画的属性，可以提高性能。

3. JavaScript 逻辑

我们将使用 jQuery 来监听列表项的点击事件，并在点击时切换 .visible 类。

$('.list-numbers--reveal li').click(function() {
  $(this).toggleClass('visible');
});

这段简单的JavaScript代码会在每次点击列表项时，为其添加或移除 visible 类。CSS会根据这个类的存在与否来应用不同的 opacity 和 max-height 值，从而触发平滑的动画效果。

关键考量与最佳实践

1. max-height 值的选择：
   • 初始 max-height： 应设置为内容隐藏时的高度，通常是内容单行的高度，或者0（如果内容完全隐藏）。设置得过大会导致动画开始前有延迟感。
   • 展开 max-height： 必须远大于内容可能达到的最大高度。如果设置得不够大，内容可能会在动画结束时被截断。设置得过大通常不会有负面影响，只会使动画的结束阶段看起来像在“等待”，但通常不明显。对于响应式设计，可能需要考虑不同屏幕尺寸下的最大高度。
2. 过渡时间 (transition-duration)： 根据用户体验需求调整动画时长。过短可能显得突兀，过长可能让用户感到等待。
3. 缓动函数 (transition-timing-function)： 选择合适的缓动函数（如 ease, ease-in-out, cubic-bezier(...)）可以使动画更自然。
4. 性能： 对于大量元素的频繁动画，过度复杂的CSS动画可能会影响性能。但对于少量元素的展开/收缩，max-height 动画通常是高效的。
5. 替代方案： 对于需要精确控制高度动画的场景，或者内容高度动态变化较大时，也可以考虑使用JavaScript动态计算元素的高度并进行动画。然而，CSS max-height 方案在大多数情况下更简洁、性能更好。

总结

通过利用CSS max-height 属性，我们可以有效地绕过 height: auto 无法动画的限制，实现内容在展开和收缩时的高度平滑过渡效果。这种方法不仅解决了内容“跳跃”的问题，也避免了在仅使用 opacity 动画时出现的布局间距不均。结合简单的JavaScript类切换，开发者可以轻松地为用户提供更加流畅和专业的交互体验。在实际应用中，合理选择 max-height 的初始值和展开值是确保动画效果自然流畅的关键。

以上就是使用CSS max-height 实现可变高度内容的平滑展开动画的详细内容，更多请关注php中文网其它相关文章！