修复轮播组件中前三张卡片Bottom Border Animation不生效问题

问题描述 #

开发铝制配件轮播组件时，sliderCard类定义的底部边框过渡动画仅后三张卡片生效，前三张卡片的该动画无法激活，需修复使所有卡片正常展示底部边框过渡效果。

问题根源 #

sliderCard类中同时包含overflow-hidden和定位为-bottom-0的after伪元素：

• overflow-hidden会裁剪卡片边界外的内容
• after:-bottom-0让底部边框伪元素位于卡片底部外侧，被overflow-hidden完全遮挡，导致动画无法显示
• 后三张卡片初始处于hidden状态，切换显示时可能因渲染优先级变化意外规避了裁剪，但这是不稳定的表现

修复步骤 #

方案1：调整伪元素位置至卡片内部 #

修改sliderCard类中的伪元素定位，将其移至卡片底部内侧，并补充内边距避免遮挡内容：

const sliderCard = "bg-white rounded-lg shadow-md p-20 flex flex-col items-center group relative hover:after:w-full after:content-[''] after:absolute after:left-1/2 after:-translate-x-1/2 after:bottom-0 after:h-1 after:bg-blue-600 after:w-0 after:transition-all after:duration-500 pb-1";

• 将after:-bottom-0改为after:bottom-0，让伪元素与卡片底部对齐
• 添加pb-1，为伪元素预留高度空间，避免覆盖卡片内容

方案2：拆分overflow-hidden至图片容器 #

保留卡片的整体布局，仅将overflow-hidden移至图片容器，确保图片圆角生效的同时不裁剪底部伪元素：

1. 修改JSX中的卡片结构，给图片包裹一层容器：

<div className={sliderCard}>
  <div className="overflow-hidden rounded-md">
    <img src="/assets/slider2/1.jpg" className="w-full h-56 object-cover transition-transform duration-300 group-hover:scale-105" alt="Card 1" />
  </div>
  <div className="mt-4 text-center">
    <h3 className="text-lg font-semibold text-gray-800">ALUMINIUM ROD</h3>
    <a href="/accessories" className={readMoreBtn}>Read more</a>
  </div>
</div>

2. 更新sliderCard类，移除overflow-hidden：

const sliderCard = "bg-white rounded-lg shadow-md p-20 flex flex-col items-center group relative hover:after:w-full after:content-[''] after:absolute after:left-1/2 after:-translate-x-1/2 after:-bottom-0 after:h-1 after:bg-blue-600 after:w-0 after:transition-all after:duration-500";

验证效果 #

修复后，所有卡片在鼠标悬停时都会触发底部蓝色边框从中心向两侧展开的过渡动画，且图片圆角效果保持正常。

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