[英]Framer-motion - 2 step animation
Imagine i have a button, when clicking on it, a red box appears and slides to right (simplified for explanation):想象一下我有一个按钮,当点击它时,会出现一个红色框并向右滑动(为解释而简化):
const [start, setStart] = useState(false);
return (
<>
<button onClick={() => setStart(true)}>Animate it</button>
{start && (
<motion.div
className='w-20 h-20 bg-red-500'
initial={{ x: 0 }}
animate={{ x: 400 }}
/>
)}
</>
);
But what i want is that it first scales up and then slides to right (this is what i mean by saying 2 step animation)...但我想要的是它首先放大然后向右滑动(这就是我所说的两步动画的意思)......
An easy way to your question is setting keyframes for your animate
props.解决问题的一种简单方法是为animate
道具设置关键帧。
animate={{ x: [0, 0, 0, 400], scale: [0, 1, 1, 1] }}
Basically, I have 4 keyframes with 2 properties of x
and scale
:基本上,我有 4 个具有x
和scale
的 2 个属性的关键帧:
Frame框架 | Animation values动画值 |
---|---|
1 (initial frame) 1(初始帧) | x: 0; ×:0; scale: 0规模:0 |
2 2 | x: 0; ×:0; scale: 1规模:1 |
3 3 | x: 0; ×:0; scale: 1规模:1 |
4 4 | x: 400; ×:400; scale: 1规模:1 |
Working demo available on Codesandbox Codesandbox上提供了工作演示
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.