Framer Motion中Exit过渡失效问题求助

问题根源 #

你代码里把transition属性嵌套在了animate对象内部，不符合Framer Motion的API规范，导致Exit过渡逻辑无法被正确识别。另外需确保isOpen状态切换时，motion组件能从DOM中真正移除，而非仅通过样式隐藏。

修正后的代码 #

import { motion, AnimatePresence } from 'framer-motion';

<AnimatePresence>
  {isOpen && (
    <motion.div
      key="modal"
      ref={sheetRef}
      initial={{ y: '100%' }}
      animate={{ y: '0%' }}
      exit={{ y: '100%' }}
      transition={{ duration: 0.2, ease: 'linear' }}
    >
      ......
    </motion.div>
  )}
</AnimatePresence>

额外验证点 #

• 确认isOpen状态切换时，motion.div确实从DOM结构中被移除
• 保证motion组件的key属性唯一且稳定，避免状态切换时key变化导致组件重新挂载而非触发移除逻辑

内容的提问来源于stack exchange，提问作者Vishal Tanna