Animate Presence 退出不工作成帧器运动

问题描述

动画存在 exit 道具不起作用

我做错了什么？

struct TestBase {
    static int member;
}

template <typename T>
class Test : public TestBase {
    // ...
};

int main() {
    // do something with TestBase::member
}

已修复！！

通过将这两个道具添加到 Switch 来修复它：

从“react-router-dom”导入{useLocation}；

const location = useLocation();

<AnimatePresence>
      <motion.div
        initial={{ opacity: 0,x: "-100%" }}
        animate={{ opacity: 1,x: 0 }}
        exit={{ opacity: 0,x: "100%" }}>
        <h1>Head</h1>
      </motion.div>
</AnimatePresence>

解决方法

这不起作用的原因是您必须明确指定您有条件渲染的子项的键。

文档参考：https://www.framer.com/api/motion/animate-presence/#unmount-animations

就您而言，<motion.div>

我这里有一些 AnimatePresense 的例子

• 有多个项目：https://codesandbox.io/s/framer-motion-multiple-item-animation-presence-sdmq
• 使用 React 路由器：https://codesandbox.io/s/framer-motion-animate-react-router-transition-kczeg