无条件渲染的 Framer Motion Animate Presence

Question

我有以下使用 framer motion 的 React 飞出导航组件。每个导航项都会多次使用此组件。

有没有其他方法可以在没有条件渲染 (SEO) 的情况下触发此动画？使用 key 将不起作用，因为我需要它默认隐藏并且仅在 isActive 等于 true 时可见。

<AnimatePresence initial={false}>
    {isActive && (
        <FlyOutWrapper exit={{ opacity: 0 }} transition={{ duration: 0.2 }}>
            <FlyOutContent
                initial={{
                    x: "5rem",
                    opacity: 0,
                }}
                animate={{
                    x: 0,
                    opacity: 1,
                }}
                transition={{ duration: 0.3 }}>
                <Content>{title}</Content>
            </FlyOutContent>
            <FlyOutBackground
                initial={{ y: "-100%" }}
                animate={{ y: 0 }}
                transition={{ duration: 0.3 }}
            />
        </FlyOutWrapper>
    )}
</AnimatePresence>

Answer 1

如果您不希望它离开 DOM，那么您根本不需要使用 AnimatePresence。相反，您可以根据 isActive 状态为位置（和不透明度等）设置动画。您可以使用 variants 或直接在属性之间切换来执行此操作。

示例（无变体）：

<FlyOutBackground
    initial={{ y: "-100%" }}
    animate={{ y: isActive ? 0 : "-100%" }}
    transition={{ duration: 0.3 }}
/>

使用变体的示例：

const bgVariants = {
    visible: {
        y: 0
    },
    hidden: {
        y: "-100%"
    }
}

<FlyOutBackground
    variants={bgVariants}
    initial="hidden"
    animate={isActive ? "visible" : "hidden"}
    transition={{ duration: 0.3 }}
/>

无条件渲染的 Framer Motion Animate Presence

Framer Motion Animate Presence without conditional rendering

javascript

reactjs

framer-motion