如何解决React组件上的动画不起作用
我在ReactJS中触发动画时遇到问题。
我有一个带有购物车图标的导航栏,该图标必须具有动画。
在另一个组件中,我具有“添加到购物车”功能。我想要的是该功能触发购物车的动画。 (请记住,这是单独的组件)
首先,这些是我组件的相关部分。
应用导航栏组件
<Item className="has-text-weight-bold has-padding-right-30 has-padding-left-30 is-hidden-touch" href="/cart">
<p className="is-relative"><i className="fas fa-shopping-cart is-size-5"></i><div className="cart-alert"></div></p>
</Item>
目标是<div className="cart-alert">
添加到购物车
onClickHandler = (evt) => {
axios.get("/cart/add_item",{
params: {
product: this.props.product.id,qty: this.state.qty,operation: 'add'
}
}).then(response => {
const data = response.data
this.setState((prev) => {
return {added: true}
});
var element = document.querySelector(".cart-alert")
element.classList.replace("cart-alert","animation")
})
}
这是应该触发动画的功能
SASS
.cart-alert {
height: 12px;
width: 12px;
position: absolute;
background: red;
top: -10px;
right: -10px;
border-radius: 50%;
}
.animation {
height: 12px;
width: 12px;
position: absolute;
background: red;
top: -10px;
right: -15px;
border-radius: 50%;
animation: bounce 0.9s 6;
}
@keyframes bounce {
10%{
height: 12px;
width: 12px;
}
30%{
height: 12px;
width: 9px;
}
50%{
height: 8px;
width: 16;
transform: translateY(22px);
}
75%{
height: 12px;
width: 9px;
}
100%{
transform: translateY(0px);
}
}
我只是想让它工作,请帮助我:(
此外,我想知道每当触发onClickHandler时如何重新启动动画。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。