ReactJS卡片上滑动画失效：点击按钮无变化，请求故障排查

核心问题分析 #

你的代码仅通过isActive切换了类名，但缺少定位布局和动画样式的实现，同时容器高度约束未配置到位，导致overflow:hidden未生效，点击按钮后无视觉变化。

具体问题及修复步骤 #

1. 容器布局与卡片堆叠问题

当前所有卡片为流式布局，未重叠在一起。父容器pageView需设置固定高度并开启定位上下文，卡片需通过绝对定位实现堆叠。

修改ProfilePage的容器结构，统一卡片堆叠容器：

// ProfilePage.tsx
return(
  <div className={style.pageView}>
    <div className={style.cardContainer}>
      {cardData.map((card, index) => (
        <Card
          key={card.id}
          title={card.title}
          content={card.content}
          isActive={index === currentCard}
          onNext={handleNextCard}
        />
      ))}
    </div>
  </div>
);

2. 补充关键CSS样式

在Home.module.css中添加以下样式，实现卡片堆叠、隐藏溢出和上滑动画：

/* Home.module.css */
.pageView {
  width: 100%;
  height: 500px; /* 根据需求调整高度 */
  overflow: hidden;
  position: relative; /* 为子容器提供定位上下文 */
}

.cardContainer {
  position: absolute;
  width: 100%;
  height: 100%;
}

.questionCard {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease-in-out; /* 添加上滑过渡动画 */
}

.card.active {
  transform: translateY(0); /* 激活卡片停留在可视区域 */
}

.card.inactive {
  transform: translateY(-100%); /* 未激活卡片隐藏在可视区域上方 */
}

3. 卡片组件结构优化

移除PointsPage中多余嵌套层级，确保卡片占满容器：

// PointsPage.tsx
return (
  <div className={`${style.questionCard} ${isActive ? 'active' : 'inactive'}`}>
    <h2>{title}</h2>
    <p>{content}</p>
    <button onClick={handleClick}>Next</button> {/* 若使用自定义Button组件需确保已导入 */}
  </div>
);

4. 边界逻辑处理（可选）

添加逻辑避免currentCard超出数组范围：

const handleNextCard = () => {
  setCurrentCard((prevCard) => {
    return prevCard >= cardData.length - 1 ? 0 : prevCard + 1; // 超出后回到第一张，或按需调整
  });
};

修复后效果说明 #

所有卡片堆叠在容器内，仅激活状态的卡片显示在可视区域；点击Next按钮时，当前卡片上滑移出，下一张卡片平滑滑入，动画由CSS过渡属性实现。

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