Tailwind卡片Hover时实现Footer滑出效果的问题求助

核心调整思路 #

• 让card-footer初始状态完全隐藏在卡片可视区域外
• 利用transform: translateY()实现Footer的滑入动画，替代单纯修改卡片高度的“揭开”效果
• 确保卡片容器的溢出裁剪规则正确，避免Footer提前显示

修改后的代码 #

Tailwind配置（简化后）

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {},
  },
  plugins: [],
}

页面代码

<div class="relative flex h-screen flex-col justify-center overflow-hidden bg-gray-50 py-6 sm:py-12">
  <div id="main-feed" class="flex h-full w-full px-2">
    <div id="card-holder" class="flex h-full w-full flex-wrap justify-start gap-2 overflow-y-auto bg-slate-200">
      <div id="card1" class="group relative mb-2 h-48 w-fit overflow-hidden rounded-lg bg-slate-500 p-2 transition-all duration-500 hover:h-64">
        <div id="card-body" class="h-44 bg-stone-600">
          <div class="flex w-full justify-between gap-2">
            <div>Content 1</div>
            <div>Content 2</div>
          </div>
          <div class="flex w-full">
            <div>Title</div>
          </div>
          <div class="flex w-full justify-between gap-2">
            <div>Content 3</div>
            <div>Content 4</div>
          </div>
        </div>
        <div id="card-footer" class="mt-2 w-full translate-y-full transition-transform duration-500 group-hover:translate-y-0">
          <div class="flex w-full flex-row justify-between">
            <div>Footer Content 1</div>
            <div>Footer Content 2</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

关键修改点说明 #

• 将卡片容器的overflow-y-clip改为overflow-hidden，确保所有超出容器的内容完全隐藏
• 给card-footer添加translate-y-full，让它初始时完全移出卡片可视区域；配合group-hover:translate-y-0，实现hover时的平滑滑入效果
• 移除Footer上冗余的z-index和定位类，避免层级混乱
• 保留卡片容器的h-48 hover:h-64规则，确保Hover时容器高度足够容纳Footer，与Translate动画配合实现自然的“滑出”体验

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