动画存在退出不工作帧运动

Question

Animate presence exit prop is not working

what i am doing wrong?

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

Fixed!!

Fixed it by adding these two props to Switch:

import {useLocation} from "react-router-dom";

const location = useLocation();

<Switch location={location} key={location.pathname}>
//Routes
</Switch>

Answer 1

The reason that this is not working is that you have to explicitly specify the key of the child that you are conditionally rendering.

Doc reference: https://www.framer.com/api/motion/animate-presence/#unmount-animations

In your case that is the <motion.div>

I have some examples of AnimatePresense here

• With Multiple Items: https://codesandbox.io/s/framer-motion-multiple-item-animation-presence-sdmq2
• With React Router: https://codesandbox.io/s/framer-motion-animate-react-router-transition-kczeg