在react中的按钮上设置动画

Question

嘿，伙计们，我的react项目中有一个按钮组件，所以让我展示代码

class Button extends Component {
constructor(props){
super(props)
this.state = {
active: false,
};
}    
render() {
return (
<button
className={
this.state.active
?  "thankyou_button_active":"thankyou_button"
}
onClick={() =>
this.setState({ active: !this.state.active })
}
>
Thank you!
</button>
);

}
}

.css

.thankyou_button_active {
transition: all 0.4s ease-in;
background-color: #ff9d72;
color: white;
border: 1px solid #ff9d72;
width: 120px;
outline: none;
height: 31px;
font-weight: 700;
border-radius: 30px;
font-size: 15px;
padding: 6px 10px;
margin-bottom: 1rem;
transform: translateY(4px);
}
.thankyou_button {
border: 1px solid #ff9d72;
background: white;
color: #ff9d72;
width: 120px;
outline: none;
height: 31px;
font-weight: 700;
border-radius: 30px;
font-size: 15px;
padding: 6px 10px;
margin-bottom: 1rem;
}

我正在更改分配给onClick事件上按钮的类，因此最初我的按钮状态"活动"为假，因此分配的类为"谢谢_button"，但在第一次单击后分配的类是"谢谢_bbutton_active">

在这种变化状态下，我想要的是我的按钮应该有按下的效果，比如在y轴上向上/向下一点，然后回到原来的位置。。。。有了这个css按钮，就像我在thankyou_button_active类中提到的那样，它会关闭，但不会出现，因为在下次单击之前，该类仍然处于活动状态

Answer 1

尝试在setState之后添加setTimeout以再次翻转状态，这样在动画结束后类将翻转回非活动(或正常类(，您还需要在.thankyou_button类中添加transition: all 0.4s ease-in;。

工作代码：

反应：

class Button extends Component {
constructor(props){
super(props)
this.state = {
active: false,
};
}    
render() {
return (
<button
className={
this.state.active
?  "thankyou_button_active":"thankyou_button"
}
onClick={() =>
this.setState({ active: !this.state.active })
setTimeout(()=>{
this.setState({ active: !this.state.active })
},400)
}
>
Thank you!
</button>
);

}
}

css：

.thankyou_button_active {
transition: all 0.4s ease-in;
background-color: #ff9d72;
color: white;
border: 1px solid #ff9d72;
width: 120px;
outline: none;
height: 31px;
font-weight: 700;
border-radius: 30px;
font-size: 15px;
padding: 6px 10px;
margin-bottom: 1rem;
transform: translateY(4px);
}
.thankyou_button {
transition: all 0.4s ease-in;
border: 1px solid #ff9d72;
background: white;
color: #ff9d72;
width: 120px;
outline: none;
height: 31px;
font-weight: 700;
border-radius: 30px;
font-size: 15px;
padding: 6px 10px;
margin-bottom: 1rem;
}

笔：https://codepen.io/davsugi/pen/dyYvOME?editors=0111