javascript - onClick 动画不触发
问题描述
所以我遇到的问题是,这里我有一个 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
}
解决方案
您需要将 spinner 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
}
推荐阅读
- tsql - 在 SQL Server 中明智地获取数据周
- r - 数据框列名中句点后的大写字母
- javascript - orderby 和 track by $index 在 AngularJS 中不起作用
- mariadb - mariabackup:空备份文件
- flutter - 如何在拖动时获取触摸位置
- angular - 角度6 scss错误
- django - 为什么 SECURE_SSL_REDIRECT 总是设置为 True?
- haskell - 如何检查 Text.XML.Cursor 中节点的内容?
- assertj - 如何在 AssertJ 中链接多个 assertThat 语句
- node.js - 如何在环回 3 中需要时自动迁移?