如何让滑出动画高度始终匹配使用vw单位的文本高度而非整个元素？

你遇到的高度不匹配问题核心原因是：vw单位的字号会随视口宽度动态变化，而你当前的滑出动画高度要么是写死的固定像素值，要么仅在页面初始化时计算过一次高度，没有跟随字号变化同步更新，导致大屏下字号放大后，动画高度跟不上文本实际高度，仅能覆盖一半。

方案1：动态绑定文本高度（适配所有自定义动画场景） #

通过JS监听视口变化，实时获取文本实际高度并注入到CSS变量供动画调用：

• 先在JS中定义高度更新逻辑，加防抖避免频繁触发：

const titleElement = document.querySelector('替换为你的标题元素选择器');

function updateTitleAnimHeight() {
  // 获取文本实际渲染高度
  const realTextHeight = titleElement.scrollHeight;
  // 注入到全局CSS变量
  document.documentElement.style.setProperty('--title-real-height', `${realTextHeight}px`);
}

// 页面初始化时计算一次
updateTitleAnimHeight();

// 监听窗口缩放，动态更新高度
let resizeDebounceTimer;
window.addEventListener('resize', () => {
  clearTimeout(resizeDebounceTimer);
  resizeDebounceTimer = setTimeout(updateTitleAnimHeight, 100);
});

• 替换动画中的固定高度为CSS变量：

/* 你的滑出动画 */
@keyframes titleSlide {
  from { height: 0; }
  to { height: var(--title-real-height); }
}

方案2：改用transform实现滑出（优先推荐，无需计算高度，性能最优） #

放弃height动画，改用位移配合溢出隐藏实现，完全适配动态变化的文本高度，且不会触发页面重排，性能更好：

/* 标题父容器 */
.title-container {
  overflow: hidden;
}

/* 标题元素 */
.title {
  font-size: 10vw; /* 保留你原来的vw字号设置 */
  animation: titleSlideUp 0.8s ease forwards;
}

@keyframes titleSlideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

方案3：纯CSS适配（兼容要求低时可用） #

直接将动画的终点高度设置为fit-content，不需要写JS逻辑，现代浏览器均支持：

@keyframes titleSlide {
  from { height: 0; }
  to { height: fit-content; }
}

注意要提前清除标题元素、父容器的固定高度限制，否则fit-content不会生效。

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