Question

我目前正在玩React姿势。我想做的是从右侧为不同的框设置动画，并在左侧退出它们。但是，我似乎无法使v1以我想要的方式工作。似乎总是默认使用退出姿势。

如何使框从右侧进行动画处理，然后从左侧退出？这是我正在处理的 https://codesandbox.io/s/react-pose-enterexit-o2qqi?fontsize=14&hidenavigation=1&theme=dark

lobstr::obj_size(v1)
>524,296 B # or 512.0078125 KB

Answer 1

首先，您需要按以下方式更新posed.div。

const Card = posed.div({
  preEnterPose: {
    x: 50,
    opacity: 0,
    transition: { duration: 150 }
  },
  enter: {
    x: 0,
    opacity: 1,
    delay: 300,
    transition: {
      x: { type: "spring", stiffness: 1000, damping: 15 },
      default: { duration: 300 }
    }
  },
  exit: {
    x: -50,
    opacity: 0,
    transition: { duration: 150 }
  }
});

然后，将<PoseGroup>的{{1}}道具设置为姿势preEnterPose的键。它应该工作。 preEnterPose的默认道具设置为preEnterPose。读here

exit

反应姿势-从右动画入，从左退出

1 个答案: