Framer motion Animate Presence 退出问题
Framer motion Animate Presence exit issue
我在使用 framer-motion AnimatePresence 组件时遇到问题。我试图在组件在视口中可见后启动动画,为此,我使用了 react-intersection-observer。它按启动动画的预期工作,但退出动画中断,我不确定是什么导致了问题。
我在 https://codesandbox.io/s/holy-dream-rb5gu?file=/src/index.js
创建了一个重现此行为的沙箱
使用命令式 AnimationControls API 似乎覆盖了元素的其他声明性动画设置(如 exit
)。
将 animate
道具更改为仅接受变体而不是动画控制似乎可行:
Code Sandbox example
我为当前变体添加了一个状态。以 hidden
开始并在 inView
更改时更新为 visible
:
// use variant instead of Animation Controls
const [variant, setVariant] = useState("hidden");
useEffect(() => {
if (inView) {
setVariant("visible");
}
}, [inView]);
然后使用该变体状态更新 div 上的动画道具:
<AnimatePresence exitBeforeEnter>
{show && (
<motion.div
ref={ref}
variants={containerVariants}
initial="hidden"
animate={variant} // use variant instead of Animation Controls
exit="hidden"
>
我在使用 framer-motion AnimatePresence 组件时遇到问题。我试图在组件在视口中可见后启动动画,为此,我使用了 react-intersection-observer。它按启动动画的预期工作,但退出动画中断,我不确定是什么导致了问题。 我在 https://codesandbox.io/s/holy-dream-rb5gu?file=/src/index.js
创建了一个重现此行为的沙箱使用命令式 AnimationControls API 似乎覆盖了元素的其他声明性动画设置(如 exit
)。
将 animate
道具更改为仅接受变体而不是动画控制似乎可行:
Code Sandbox example
我为当前变体添加了一个状态。以 hidden
开始并在 inView
更改时更新为 visible
:
// use variant instead of Animation Controls
const [variant, setVariant] = useState("hidden");
useEffect(() => {
if (inView) {
setVariant("visible");
}
}, [inView]);
然后使用该变体状态更新 div 上的动画道具:
<AnimatePresence exitBeforeEnter>
{show && (
<motion.div
ref={ref}
variants={containerVariants}
initial="hidden"
animate={variant} // use variant instead of Animation Controls
exit="hidden"
>