onClick动画未触发

Question

所以我遇到的问题是，这里我有一个pushLogic，所以我试图实现的事情是，当我按下按钮时，我想要启动动画，我希望微调器开始旋转，但由于某种原因，它不能这样做。

  const [spinnerOne, setSpinnerOne] = useState(true);

  const push= ()=>{ 
    setSpinnerOne(true)
    setTimeout(()=>{
     history.push('/')
    },3000)
 
 }
  return (
     <div>
       <span className={spinnerOne  ? `spinnerOne` :''}></span>
       <button onClick={push} ></button>
    </div>

css

@keyframes spinnerOne {
  to {
    transform: rotate(360deg);
  }
}
.spinnerOne:before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin-top: -120px;
  margin-left: -50px;
  border-radius: 50%;
  border: 5px solid #b409ca;
  border-top-color: #3500c8;
  border-right-color: rgb(221, 7, 0);
  border-bottom-color: rgb(246, 98, 0);
  animation: spinnerOne 2s linear infinite
}

Answer 1

您需要将微调器css类从动画css类中分离出来，并应用动画类onClick。

export default function App() {
   const [spinnerOne, setSpinnerOne] = useState(false);

  const push= ()=>{ 
    setSpinnerOne(true)
    setTimeout(()=>{
     //history.push('/')
    },3000)
 
 }
  return (
     <div>
       <span className={spinnerOne  ? `spinner spinnerOne` :'spinner'}></span>
       <button onClick={push} >Click me</button>
    </div>
  )
}

css

.spinner:before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin-top: -120px;
  margin-left: -50px;
  border-radius: 50%;
  border: 5px solid #b409ca;
  border-top-color: #3500c8;
  border-right-color: rgb(221, 7, 0);
  border-bottom-color: rgb(246, 98, 0);
}

.spinnerOne:before {
  animation: spinnerOne 2s linear infinite
}

https://stackblitz.com/edit/react-bvcnru?file=src/App.js