React中动画完成后无法触发卡片hover缩放效果求助

安全阿岳

2026-6-19

问题分析与解决方案

你的问题核心是CSS入场动画结束后，hover时的缩放效果被动画的transform状态覆盖——CSS动画的优先级高于普通hover伪类规则，若动画设置了fill-mode: forwards，会锁定transform属性，导致后续hover变换无法生效。

解决方案1：修改hover的transform为组合值

将自定义CSS中的.card:hover规则调整为同时保留入场后的平移状态与缩放效果，直接覆盖动画的transform值：

.card:hover {
  transform: translateX(0) scale(1.1); /* 组合平移与缩放，确保覆盖动画状态 */
}

解决方案2：改用Tailwind过渡类实现入场动画（推荐）

放弃CSS @keyframes，改用Tailwind的过渡类实现入场效果，彻底避免动画优先级冲突：

调整卡片初始className：

<div
  key={index}
  className="card bg-cover bg-center bg-no-repeat rounded-lg w-64 h-96 md:w-72 md:h-[28rem] lg:w-80 lg:h-[32rem] opacity-0 -translate-x-20 transition-all duration-800 ease-in-out hover:scale-110"
  style={{ backgroundImage: `url(${card.imageUrl})` }}
>
  <div className="text-white p-4">
    <h3 className="text-lg font-bold">{card.text}</h3>
  </div>
</div>

通过JS监听滚动触发入场（实现依次出现效果）：

// 示例：使用IntersectionObserver监听区域可见性
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.querySelectorAll('.card').forEach((card, idx) => {
        setTimeout(() => {
          card.classList.remove('opacity-0', '-translate-x-20');
          card.classList.add('opacity-1', 'translate-x-0');
        }, idx * 200); // 依次入场的延迟时间
      });
    }
  });
});

if (sectionRef.current) observer.observe(sectionRef.current);

这种方式通过类切换实现入场，动画结束后无锁定状态，Tailwind的hover:scale-110可正常生效。