reactjs 如何在Framer Motion中将百分比与MotionValues配合使用？

wz3gfoph 于 2022-11-29 发布在 React

关注(0)|答案(3)|浏览(96)

使用Framer Motion的useTransform，我想使用百分比（例如75%）而不是像素来更改元素的宽度。
默认假定像素：

<motion.div className="dynamic-element" style={{ width: w }}>

我想要类似以下的内容：

<motion.div className="dynamic-element" style={{ width:`${w}%` }}>

很明显这是行不通的。
如何指定我的MotionValue是百分比而不是基于像素的？
或者，我可以使用filter: scale()，但这会导致内容模糊（是的，我已经研究了如何解决这个问题，但还没有任何成功）。

3条答案

您可以这样做：

useTransform(w, (value) => `${value}%`);

你能使用变体吗？
例如：

<motion.div
  variants={{
    a: {width: '20%'},
    b: {width: '50%'}
  }}
  animate={variant}
/>

您可以使用百分比作为输出值。

const width = useTransform(w, [0, someOtherNumberYouPick], ['0%', '100%'])
...
<motion.div className="dynamic-element" style={{ width }}>