React和CSS动画-只使用共享className对单击的元素进行动画处理

Question

我正在使用React开发一个简单的web浏览器绘图应用程序。该应用程序使用按钮的图像来选择要绘制的颜色。这些彩色按钮图像中的每一个都具有相同的className='color-button'

我遵循了这篇文章，了解如何使用CSS动画在点击时为彩色按钮图像设置动画：https://dev.to/samwatts98/how-to-easily-animate-your-react-components-on-click-with-css-keyframes-26mg

问题是，点击任何一个颜色的按钮图像都会使它们充满活力，因为它们都共享className='color-button'。我只想动画的彩色按钮图像，点击。

当前状态的应用程序的实时版本如下：https://master.d3irlm8kk772s.amplifyapp.com/

下面是设置"；"推"；带有钩子的动画状态加上我尝试过的一个不起作用的附加功能：

const [push, setPush] = useState(0);
//This function was tried but didn't solve the problem:
function changeSetPush(){
setPush(1);
}

这是图像本身的代码。第一个图像尝试changeSetPush功能，但获得了与其他图像相同的结果：

{/* Circle Color Buttons */}
<div style={{width: 96}}>
<img src={BlackCircle} alt='black' className='color-button'
onClick={() => {changePenColor('#000000');
changeSetPush()}} onAnimationEnd={() => setPush(0)} push={push}
/>
<img src={WhiteCircle} alt='white' className='color-button'
onClick={() => {changePenColor('#FFFFFF');
setPush(1)}} onAnimationEnd={() => setPush(0)} push={push}
/>
<img src={RedCircle} alt='red' className='color-button'
onClick={() => {changePenColor('#FE2B01');
setPush(1)}} onAnimationEnd={() => setPush(0)} push={push}
/>
<img src={GreenCircle} alt='green' className='color-button'
onClick={() => {changePenColor('#3FF913');
setPush(1)}} onAnimationEnd={() => setPush(0)} push={push}
/>
<img src={YellowCircle} alt='yellow' className='color-button'
onClick={() => {changePenColor('#FCFC0A');
setPush(1)}} onAnimationEnd={() => setPush(0)} push={push}
/>
<img src={BlueCircle} alt='blue' className='color-button'
onClick={() => {changePenColor('#2A2EFE');
setPush(1)}} onAnimationEnd={() => setPush(0)} push={push}
/>
<img src={OrangeCircle} alt='orange' className='color-button'
onClick={() => {changePenColor('#FF8B00');
setPush(1)}} onAnimationEnd={() => setPush(0)} push={push}
/>
<img src={PurpleCircle} alt='purple' className='color-button'
onClick={() => {changePenColor('#F03EFE');
setPush(1)}} onAnimationEnd={() => setPush(0)} push={push}
/>
</div>

这是动画的CSS：

.color-button {
width: 48px;
height: 48px;
vertical-align: bottom;
}
.color-button[push='1'] {
animation: push 200ms 1;
}
@keyframes push {
25% {
transform:scale(0.95);
}
50% {
transform:scale(0.90);
}
75% {
transform:scale(0.85);
}
100% {
transform:scale(0.80);
}
}

GitHub回购在这里：https://github.com/Johnsensei/oekaki

React组件是一个功能组件，所以我不能使用this.setState.

为了只在单击的颜色按钮上获得动画，我应该在代码中更改什么？

谢谢你的帮助。

Answer 1

好的，它在一个非常"React"；解决问题的方法。

首先，我们制作了一个名为ColorButton 的新组件

import React, { useState } from 'react';
const ColorButton = ({ alt, onClick, src }) => {
const [pushed, setPushed] = useState(false);

return (<img 
src={src}
alt={alt}
className={`color-button ${pushed ? "push" : ""}`}
onClick={() => {
onClick();
setPushed(true);
}}
onAnimationEnd={() => setPushed(false)}
/>)
}
export default ColorButton;

然后我们将其导入并实现到主组件中：

import ColorButton from './ColorButton';
...
<div style={{width: 96}}>
<ColorButton
src={BlackCircle}
alt='black'
onClick={() => changePenColor('#000000')}
/>
<ColorButton
src={WhiteCircle}
alt='white'
onClick={() => changePenColor('#FFFFFF')}
/>
<ColorButton
src={RedCircle}
alt='red'
onClick={() => changePenColor('#FE2B01')}
/>
<ColorButton
src={GreenCircle}
alt='green'
onClick={() => changePenColor('#3FF913')}
/>
<ColorButton
src={YellowCircle}
alt='yellow'
onClick={() => changePenColor('#FCFC0A')}
/>
<ColorButton
src={BlueCircle}
alt='blue'
onClick={() => changePenColor('#2A2EFE')}
/>
<ColorButton
src={OrangeCircle}
alt='orange'
onClick={() => changePenColor('#FF8B00')}
/>
<ColorButton
src={PurpleCircle}
alt='purple'
onClick={() => changePenColor('#F03EFE')}
/>
</div>

最后，更新CSS动画：

.color-button {
width: 48px;
height: 48px;
vertical-align: bottom;
}
.push {
animation: push 200ms 1;
}
@keyframes push {
25% {
transform:scale(0.95);
}
50% {
transform:scale(0.90);
}
75% {
transform:scale(0.85);
}
100% {
transform:scale(0.80);
}
}

修复程序现已上线：https://master.d3irlm8kk772s.amplifyapp.com/

这是我第一次向Stack Overflow发布问题。这里的每个人都很乐于助人，我也在Discord和Slack频道寻求帮助。来自纳什维尔免费CodeCamp的泰勒特别呐喊。谢谢