Javascript 在react中设置按钮上的动画

嘿，伙计们，我的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>
    );


  }
}

我正在更改分配给onClick事件上按钮的类，因此最初我的按钮状态“活动”为false，分配的类为“Thankyu\u button”，但第一次单击后，分配的类为“Thankyu\u button\u活动”

---

在这种状态下，我想要的是我的按钮应该有一个按下的效果，比如在y轴上向上/向下移动一点，然后回到原来的位置。。。。如我在“Thankyu_button_active”类中所述，此css按钮将关闭，但不会出现，因为该类在下一次单击之前仍保持活动状态

请尝试在

设置状态

后添加

设置超时

以再次翻转状态，以便在动画结束后该类将翻转回非活动（或正常类）， 您需要添加

transition:all 0.4s ease in.thankyou\u按钮中的code>也可以

工作代码：

反应：

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_按钮{transition:all 1s ease；}将转换附加到thnakyou_按钮您应该看看
样式化组件
。使用样式化组件，您可以自定义
按钮
并向其传递一些道具，然后您可以基于道具修改其css
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>
    );


  }
}

.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;
}