不使用InertiaJs的Framer移动和退出属性

Question

我想知道如何使用“退出”属性与框架运动和InertiaJs /ReactJ请。

目前我有两页：

profil.js

const { pathname } = window.location
...

<div>
    <motion.div className="flex flex-col" layoutId={`title-3`}
            initial={{opacity: 0}}
            animate={{
                y: [-20, 0],
                opacity: [0, 1]
            }}
            exit={{scale: 2}}
            key={{pathname}}
            transition={{duration: 0.2, ease: "easeOut", delay: 0.1}}
>
    <span>Profil</span>
    </motion.div>
</div>

home.js

const { pathname } = window.location
...

<div>
    <motion.div className="flex flex-col" layoutId={`title-3`}
            initial={{opacity: 0}}
            animate={{
                y: [-20, 0],
                opacity: [0, 1]
            }}
            exit={{scale: 2}}
            key={{pathname}}
            transition={{duration: 0.2, ease: "easeOut", delay: 0.1}}
>
    <span>Home</span>
    </motion.div>
</div>

我在我的应用程序(app.js)上设置了app.js：

import { AnimateSharedLayout } from 'framer-motion';

return render(
    <Provider store={store}>
        <AnimateSharedLayout>
            <App {...props} />
        </AnimateSharedLayout>
    </Provider>, el
);

当我点击侧边栏中的"home“或"profil”时，我看到了动画，但没有看到退出动画。

我用的是InertiaJ和ReactJ。

你知道为什么我看不到出口吗？

Answer 1

一旦您单击"home“或"profile"，该元素就会立即从DOM中删除，因此它在那里的时间不会足够长，无法看到动画。

框架运动文档

通过使用AnimatePresence包装运动组件，它们获得了exit属性的使用，该属性可以定义一组值或要在移除之前对其进行动画处理的变体名称。

尝试用这样的<motion.div>包装<AnimatePresence>：

const { pathname } = window.location
...

<div>
    <AnimatePresence>
    <motion.div className="flex flex-col" layoutId={`title-3`}
            initial={{opacity: 0}}
            animate={{
                y: [-20, 0],
                opacity: [0, 1]
            }}
            exit={{scale: 2}}
            key={{pathname}}
            transition={{duration: 0.2, ease: "easeOut", delay: 0.1}}
    >
    <span>Home</span>
    </motion.div>
    </AnimatePresence>
</div>