React中使用CSS动画时如何仅触发被点击的同className元素动画

解决方案 #

你遇到的问题根源是所有按钮共享同一个全局push状态，只要状态更新为1，所有按钮的push属性都会变成1，因此全部触发动画。只要把状态改为存储当前被点击按钮的唯一标识，仅匹配标识的按钮才会激活动画属性即可，修改步骤如下：

1. 修改状态定义

把原来的数值类型的push状态，改为存储激活按钮的唯一标识（用颜色值即可，本身就是唯一的）：

// 替换原有的 const [push, setPush] = useState(0);
const [activePushBtn, setActivePushBtn] = useState(null);

2. 调整每个颜色按钮的属性绑定

每个按钮点击时将自身的颜色值存入状态，动画结束后清空状态，仅当状态值和当前按钮的颜色匹配时，push属性才为1：
以黑色按钮为例，其余按钮按相同规则修改即可：

<img 
  src={BlackCircle} 
  alt='black' 
  className='color-button'
  onClick={() => {
    changePenColor('#000000');
    setActivePushBtn('#000000');
  }} 
  onAnimationEnd={() => setActivePushBtn(null)}
  push={activePushBtn === '#000000' ? 1 : 0}
/>

可选优化：抽离配置循环渲染（简化重复代码）

你可以把所有颜色按钮的配置抽成数组，循环渲染避免重复编写逻辑：

// 在组件内提前定义按钮配置
const colorButtonConfigs = [
  { src: BlackCircle, color: '#000000', alt: 'black' },
  { src: WhiteCircle, color: '#FFFFFF', alt: 'white' },
  { src: RedCircle, color: '#FE2B01', alt: 'red' },
  { src: GreenCircle, color: '#3FF913', alt: 'green' },
  { src: YellowCircle, color: '#FCFC0A', alt: 'yellow' },
  { src: BlueCircle, color: '#2A2EFE', alt: 'blue' },
  { src: OrangeCircle, color: '#FF8B00', alt: 'orange' },
  { src: PurpleCircle, color: '#F03EFE', alt: 'purple' },
];

// 渲染时直接遍历数组
<div style={{width: 96}}>
  {colorButtonConfigs.map(btn => (
    <img
      key={btn.alt}
      src={btn.src}
      alt={btn.alt}
      className='color-button'
      onClick={() => {
        changePenColor(btn.color);
        setActivePushBtn(btn.color);
      }}
      onAnimationEnd={() => setActivePushBtn(null)}
      push={activePushBtn === btn.color ? 1 : 0}
    />
  ))}
</div>

原有CSS代码无需修改，调整后只有被点击的按钮会触发动画。

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