如何添加内容高度偏移实现hover时卡片描述上滑展示的动画效果

最优实现方案 #

完全不需要依赖JS计算高度，使用CSS transform属性即可实现自适应高度的滑入效果，transform的百分比值默认基于元素自身尺寸计算，天然适配任意长度的描述文本，同时可以规避字体加载滞后导致的高度计算错误问题。

调整后的样式代码 #

/* 给父容器加基础配置 */
.wrapper {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.team-meta {
  position: absolute;
  bottom: 0;
  width: 100%;
  transition: transform 0.3s ease;
  z-index: 2;
}

.team-description {
  position: absolute;
  bottom: 0;
  /* 默认向下偏移自身完整高度，实现隐藏 */
  transform: translateY(100%);
  transition: transform 0.3s ease;
  z-index: 1;
}

/* hover状态触发动画 */
.wrapper:hover .team-meta {
  /* 标题向上偏移自身高度，预留描述展示空间 */
  transform: translateY(-100%);
}
.wrapper:hover .team-description {
  /* 描述向上滑入至可见区域 */
  transform: translateY(0);
}

方案说明 #

1. 不需要修改原有HTML结构，仅调整样式即可实现需求
2. 自动适配任意长度的描述内容，无需提前获知高度值
3. 纯CSS实现性能更高，过渡动画不会触发页面重排，流畅度优于JS操作top/bottom属性
4. 完全避免了字体加载滞后、JS动态计算高度不准的问题

如果一定要使用anime.js实现动画，只需要把原来操作top/bottom的逻辑改成操作transform属性即可，不会出现百分比转px错误的问题：

document.querySelectorAll('.team-container').forEach((e) => {
  const descEl = e.querySelector(".team-description");
  const metaEl = e.querySelector(".team-meta");
  anime({
    targets: descEl,
    translateY: ['100%', 0]
  }); 
  anime({
    targets: metaEl,
    translateY: [0, '-100%']
  });
});

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