reactjs - Framer 运动 Animate Presence 退出问题
问题描述
我遇到了 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
并更新到visible
何时inView
更改:
// 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"
>
推荐阅读
- python - Is there a way to filter fields when value of the first field chosen changes?
- c++ - 当作为指向函数的指针传递时,无法在 VS 代码调试器中查看数组值
- c - NEON 代码在 armeabi-v7a 上比标准 C 代码快,但在 arm64-v8a 上慢
- android - Android 以编程方式发送 SMS 和 PendingIntents 问题
- jquery - Django Ajax:在多个python脚本的目录中调用特定的python脚本
- smarty - Prestahop 功能在新的 smarty 致命错误后消失了
- python - pygame事件KEYDOWN导致一次性激活循环
- python - 为什么海象运算符在此函数的返回语句中实现时不起作用?
- javascript - 从端点删除后如何删除行
- python - 在 Python 中创建分组条形图错误