React实现计数器时连续点击同个按钮动画不触发如何解决

原因确认 #

你的判断完全正确。CSS动画仅在对应类名首次被绑定到DOM元素时触发，连续点击同一按钮时btnclass状态值没有发生变更，React不会更新h3标签的class属性，因此动画不会重新运行。

最优解决方案 #

最简单的实现方式是给h3标签添加key属性，值绑定为计数器的value值。每次点击按钮时value都会更新，React会判定为新的DOM元素，重新挂载时绑定的类名就会自动触发对应动画，无需修改其他业务逻辑：

// 仅修改h3标签即可，其余代码保持不变
<h3 
  key={value} 
  className={btnclass} 
  style={{color: btnclass=="minus"? "red": "green"}}
>
  {value}
</h3>

备选实现方案 #

如果你不想重建DOM元素，可以在更新类名前先清空旧类名，等待DOM更新完成后再赋值新类名即可触发动画，同时建议把setValue修改为函数式更新，避免连续点击时的闭包问题：

const decrement = () => {
  setBtnClass("")
  setTimeout(() => {
    setBtnClass("minus")
    setValue(prev => prev - 1)
  }, 0)
}
const increment = () => {
  setBtnClass("")
  setTimeout(() => {
    setBtnClass("plus")
    setValue(prev => prev + 1)
  }, 0)
}

CSS优化建议 #

你可以给动画类添加animation-fill-mode: forwards属性，保证动画结束后保持最后一帧的样式，和你设置的行内颜色样式匹配更顺滑：

.minus {
  animation-name: minus;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}
.plus {
  animation-name: plus;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

内容的提问来源于stack exchange，提问作者Urjit Desai