javascript 我怎样才能使framer-motion总是在useState中动画我的数组，当它被重新渲染/更改时？

vsaztqbk 于 2023-09-29 发布在 Java

关注(0)|答案(2)|浏览(95)

我设置了一个沙盒来说明我的问题：Link to codesandbox
当你点击“全部”，然后一年，它不会动画框。它还跳过了对特定年份的元素进行动画处理的其他方式。如果您单击一年，然后单击“全部”。仅为新元素设置动画。
我如何用帧运动解决这个问题？
我尝试在 * 元素上使用键propery<motion.div>，但没有任何成功。

JavaScript

来源：https://stackoverflow.com/questions/77195021/how-can-i-make-framer-motion-always-animate-my-array-in-usestate-when-it-gets-re

2条答案

按热度按时间

pokxtpni1#

您应该尝试添加<AnimatePresence>和一些额外的 prop 。下面是一个示例link to codeSandbox

export default function App() {
const [persons, setPersons] = useState(arr);

function handleChange(e) {
  // ...
}

return (
  <>
...
...
    <div style={{ display: "grid", gap: "1rem", justifyItems: "center" }}>
      <AnimatePresence>
        {persons.map((person) => (
          <Person name={person.name} year={person.year} key={person.name} />
        ))}
      </AnimatePresence>
    </div>
  </>
);
}

<motion.div>的动画属性

const itemAnimation = {
  initial: { opacity: 0, scale: 0.2 },
  animate: { opacity: 1, scale: 1 },
  transition: { duration: 1 },
  exit: { opacity: 0, scale: 0 }
};

Each Array项div应如下所示

function Person({ name, year }) {
  return (
    <motion.div
      key={name + year}
      className="motion-div"
      variants={itemAnimation}
      initial="initial"
      animate="animate"
      exit="exit"
    >
      <p>
        {name} - {year}
      </p>
    </motion.div>
  );
}

赞(0）回复(0）举报 2023-09-29

wgxvkvu92#

我想通了。我需要的是把layoutprop放在**<motion.div上。你可以在这里阅读更多关于它：layout animations
我用那个prop**更新了我的codesandbox。您可以在此处查看工作代码和框：Working sandbox

赞(0）回复(0）举报 2023-09-29