未知文本高度下，如何用cubic-bezier实现CSS文本容器滑开动画？

当文本高度不固定时，用max-height: 极大值的方案会让cubic-bezier时间函数失效——因为动画的目标高度远大于元素真实高度，时间曲线的后半段在元素已经完全展开后仍在运行，视觉上就失去了曲线的效果。以下是两种可行的解决方案：

方案一：JS配合CSS变量获取真实高度 #

通过JavaScript获取文本容器的真实高度，赋值给CSS变量，让动画使用精确的目标高度，从而保留cubic-bezier的曲线效果。

修改后的代码 #

CSS

.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 500px;
}

.wrapper .line {
  flex: 1;
  border-top: 2px solid #000;
  height: 2px;
  width: 100%;
}

.wrapper .text {
  overflow: hidden;
  animation-name: text-animation;
  animation-duration: 4s;
  animation-timing-function: cubic-bezier(.23,.69,.09,.95);
  /* 定义存储真实高度的CSS变量 */
  --text-height: 0;
}

@keyframes text-animation {
  0% {
    max-height: 0;
  }
  100% {
    max-height: var(--text-height);
  }
}

HTML

<div class="wrapper">
  <div class="line"></div>
  <div class="text">
    <p>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </p>
    <p>
    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </p> 
    </div>
  <div class="line"></div>
</div>

JavaScript

// 页面加载后获取文本容器真实高度并赋值给CSS变量
document.addEventListener('DOMContentLoaded', () => {
  const textEl = document.querySelector('.text');
  // scrollHeight包含内边距，适合作为max-height的目标值
  textEl.style.setProperty('--text-height', `${textEl.scrollHeight}px`);
});

方案二：CSS Grid动态行高过渡 #

利用CSS Grid的grid-template-rows属性过渡，从0高度行切换到自适应高度行，无需手动获取高度，现代浏览器支持良好。

修改后的代码 #

CSS

.wrapper {
  display: grid;
  grid-template-rows: 1fr 0fr 1fr; /* 初始文本容器高度为0 */
  transition: grid-template-rows 4s cubic-bezier(.23,.69,.09,.95);
  max-width: 500px;
}

/* 添加类触发展开动画 */
.wrapper.active {
  grid-template-rows: 1fr auto 1fr; /* 文本容器高度自适应 */
}

.wrapper .line {
  border-top: 2px solid #000;
  height: 2px;
  width: 100%;
}

.wrapper .text {
  overflow: hidden;
}

HTML

<div class="wrapper">
  <div class="line"></div>
  <div class="text">
    <p>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </p>
    <p>
    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </p> 
    </div>
  <div class="line"></div>
</div>

JavaScript

// 页面加载后触发动画（可根据需求调整触发时机）
document.addEventListener('DOMContentLoaded', () => {
  setTimeout(() => {
    document.querySelector('.wrapper').classList.add('active');
  }, 100);
});

方案对比 #

• JS+CSS变量：兼容性好，适配所有现代浏览器，高度计算精确，适合对兼容性要求高的场景。
• CSS Grid：代码更简洁，无需手动计算高度，但依赖浏览器对Grid属性过渡的支持（Chrome 66+、Firefox 61+、Safari 12.1+）。

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