reactjs 使用AnimatePresence和React HOC时，帧运动未渲染退出动画

3bygqnnd 于 2022-12-22 发布在 React

关注(0)|答案(1)|浏览(147)

在我尝试在React中创建可重用的动画HOC时，我遇到了一个渲染退出动画的问题。似乎AimatePresence没有注册退出动画，而React只是从DOM中删除组件，而没有渲染退出动画。

HOC的代码

const withDropdown = (Component: React.ComponentType) => (props: InfoProps) =>
  (
    <div className="">
      <button> ... button element controls state </button>
      <AnimatePresence>
        {props.collapsed && (
          <motion.div
            key="modal"
            className="overflow-hidden"
            initial={{ height: "auto"}}
            animate={{ height: "auto" }}
            exit={{ height: 0 }}
          >
            <Component />
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );

组件代码

const someInfo = () => {
  return (
    <motion.div className="flex flex-col">
      <p>Some Info </p>
    </motion.div>
  );
};

主组件内的代码

const [showThis, setShowThis] = useState(false);
  const InfoWithDropDown = withDropdown(someInfo);

联合安全部队

<InfoWithDropDown
            collapsed={showThis}
            collapsedSetter={setShowThis}
          />

reactjs

来源：https://stackoverflow.com/questions/74872656/framer-motion-not-rendering-exit-animation-when-using-animatepresence-and-react

1条答案

按热度按时间

ux6nzvsh1#

经过一些尝试和错误后，很容易就解决了这个问题。
解决方案是让组件管理自己的状态，而不是向下传递状态和setter。
HOC的新代码如下所示：

const withDropdown = (Component: React.ComponentType) => (props: InfoProps) => {
  const [isActive, setIsActive] = useState(false);
  return (
    <div className="mt-5">
      <button ... button to control state </button>
      <AnimatePresence>
        {isActive && (
          <motion.div
            key={props.value}
            className="overflow-hidden"
            initial={{ height: 0 }}
            animate={{ height: "auto" }}
            exit={{ height: 0 }}
          >
            <Component />
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
};

赞(0）回复(0）举报 2022-12-22

我来回答

reactjs 使用AnimatePresence和React HOC时，帧运动未渲染退出动画

1条答案

相关问题

热门标签

最新问答