React中如何实现按钮内两种图标状态的淡入淡出切换？

不需要复杂的第三方库，用纯CSS配合状态切换就能实现平缓的过渡效果，核心思路是让两个图标重叠显示，通过调整透明度和可见性来完成切换，而非直接替换图标组件。

方法1：纯CSS实现（轻量推荐） #

修改JSX代码 #

把原来的条件渲染单个Icon，改成同时渲染两个Icon，通过toggle状态给它们添加控制显示/隐藏的类：

<NavToggle onClick={() => setToggle(!toggle)}>
  <Icon className={`toggle-icon ${toggle ? 'hidden' : 'visible'}`} icon={faBars}></Icon>
  <Icon className={`toggle-icon ${toggle ? 'visible' : 'hidden'}`} icon={faMinus}></Icon>
</NavToggle>

添加CSS样式 #

给按钮容器和图标设置定位与过渡属性，让图标重叠并实现淡入淡出：

/* 给按钮设置相对定位，让内部图标可以绝对定位 */
.NavToggle {
  position: relative;
  /* 保留你原本的按钮样式，比如宽高、背景色等 */
}

/* 图标基础样式：绝对定位让两个图标完全重叠 */
.toggle-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 设置过渡时长和缓动效果，可自行调整数值 */
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* 隐藏状态：透明且不可点击 */
.toggle-icon.hidden {
  opacity: 0;
  visibility: hidden;
}

/* 显示状态：完全不透明且可见 */
.toggle-icon.visible {
  opacity: 1;
  visibility: visible;
}

点击按钮时，两个图标会以0.3秒的时长平滑切换，彻底解决生硬跳转的问题。

方法2：使用React Transition Group（适合复杂动画需求） #

如果需要更灵活的动画控制，可以借助react-transition-group库：

1. 先安装依赖：

npm install react-transition-group

2. 修改组件代码：

import { CSSTransition, TransitionGroup } from 'react-transition-group';

// ...

<NavToggle onClick={() => setToggle(!toggle)}>
  <TransitionGroup>
    <CSSTransition
      key={toggle ? 'minus' : 'bars'}
      timeout={300}
      classNames="icon-fade"
    >
      <Icon icon={toggle ? faMinus : faBars}></Icon>
    </CSSTransition>
  </TransitionGroup>
</NavToggle>

3. 添加对应CSS：

/* 进入动画初始状态 */
.icon-fade-enter {
  opacity: 0;
}

/* 进入动画活跃状态 */
.icon-fade-enter-active {
  opacity: 1;
  transition: opacity 300ms ease-in;
}

/* 退出动画初始状态 */
.icon-fade-exit {
  opacity: 1;
}

/* 退出动画活跃状态 */
.icon-fade-exit-active {
  opacity: 0;
  transition: opacity 300ms ease-out;
}

/* 确保图标切换时位置固定 */
.NavToggle {
  position: relative;
}

.NavToggle .icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

两种方法都能实现平缓过渡，纯CSS方案更轻量，无需额外依赖，优先推荐使用。

内容的提问来源于stack exchange，提问作者Saif eldeen Adel