[英]How to use framer motion animation with swiper.js (React)?
[英]How to use animation multiple times in framer motion
就像标题一样,我试图在单击按钮时多次为我的组件设置动画。 目前,动画只运行一次,然后不再工作,我怎么可能实现
这是我正在尝试做的一个例子:
const controls = useAnimation();
const handleClick = (e) => {
controls.start({
rotate: "360deg",
});
};
return(
<motion.button onClick={handleClick}>Button</motion.button>
<motion.div className="someRect" animate={controls}></motion.div>
)
老实说,我从未使用过 useAnimation 控件,所以我不知道这里发生了什么以及如何使用您的方法绕过这个障碍,但是您可以通过这样的方法实现您所追求的目标。
<button onClick={() => setRotate((prevState) => prevState + 360)}>
Button
</button>
<motion.div
className="someRect"
animate={{
rotate: rotate,
transition: { duration: 3 }
}}
style={{ width: "100px", height: "100px", background: "red" }}
>
</motion.div>
我知道这个解决方案不是最佳的,因为状态随着每次点击而增长和增长到可能非常大的大小,这可能会在某些时候导致问题。
在此CodeSanbox 中检查我的解决方案
希望也许有人会想出一个更优雅的解决方案,我也很乐意看到。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.