css - 如何在 Framer Motion 中将百分比与 MotionValues 一起使用？

Question

使用 Framer Motion'suseTransform我想使用MotionValue百分比（例如75%）而不是像素来更改元素的宽度。

默认假设像素：

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

我想要以下内容：

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

这显然行不通。

如何指定 myMotionValue是百分比而不是基于像素的？

或者，我可以使用filter: scale()，但这会导致内容模糊（是的，我已经研究过如何解决这个问题，但没有取得任何成功）。

score 1 · Accepted Answer

1

你可以这样做：

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

于 2020-07-14T05:25:03.113 回答

score 0 · Accepted Answer

可以使用变体吗？

例如：

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

2 回答 2