React中Framer Motion的Exit属性失效问题求助

你的Exit动画不工作的核心原因是组件没有被条件渲染移除——Framer Motion的Exit动画只有在组件从DOM中被卸载时才会触发，而你的代码里AnimatePresence包裹的组件始终处于渲染状态，自然不会执行Exit动画。结合代码细节，以下是具体修复步骤：

1. 添加组件显示状态控制 #

需要一个状态来决定Carosel组件是否渲染。如果状态由父组件管理，确保handleClose能正确更新父组件的状态以卸载当前组件；如果用内部状态，在组件内添加：

const [isOpen, setIsOpen] = useState(true);

2. 给AnimatePresence添加条件渲染 #

将motion组件包裹在条件判断中，只有状态为true时才渲染：

<AnimatePresence mode='wait'>
  {isOpen && (
    <Box
      component={motion.div}
      variants={dropIn}
      initial="hidden"
      animate="visible"
      exit="exit"
      onClick={(e)=> e.stopPropagation()}
    >
      {/* 内部内容 */}
    </Box>
  )}
</AnimatePresence>

3. 绑定Cancel按钮的关闭事件 #

点击Cancel时触发状态更新，让组件卸载：

<Button onClick={() => {
  setIsOpen(false);
  handleClose(); // 同步通知父组件
}}>
  <CancelIcon />
</Button>

4. 修复代码中的语法错误 #

这些错误会导致组件运行异常，间接影响动画执行：

• post.Map(elem)=>{ 改为 post.map((elem) => {（注意小写map，函数参数加括号）
• console.log(response. Data); 改为 console.log(response.data);（注意小写data）

修复后的完整代码示例 #

import React, { useEffect, useState } from 'react';
import { Box, Typography, Button } from '@mui/material';
import { motion, AnimatePresence } from 'framer-motion'
import '../Style/app.css'
import axios from 'axios' 
import CancelIcon from '@mui/icons-material/Cancel';

export default function Carosel({handleClose}) {
  const [post, setPost] = useState([]);
  const [isOpen, setIsOpen] = useState(true);

  const getLoad = async()=>{
    const response = await axios.get('http://127.0.0.1:8000/media/carosel');
    console.log(response.data);
    setPost(response.data);
  }

  useEffect(()=>{
    getLoad();
  },[])

  const dropIn ={
    hidden:{
      y:"100vh",
      opacity:0,
    },
    visible:{
      y:"0",
      opacity:1,
      transition:{
        duration:1.5,
        type:"spring",
        damping:35,
        stiffness:100,
      },
    },
    exit:{
      y:"-100vh",
      opacity:0,
      transition:{
        duration:1.5,
        type:"spring",
        damping:35,
        stiffness:100,
      },
    },
  };
  
  return (
    <>
      <AnimatePresence mode='wait'>
        {isOpen && (
          <Box
            component={motion.div}
            variants={dropIn}
            initial="hidden"
            animate="visible"
            exit="exit"
            onClick={(e)=> e.stopPropagation()}
          >
            <Button onClick={() => {
              setIsOpen(false);
              handleClose();
            }}>
              <CancelIcon />
            </Button>

            {post.map((elem)=>{
              return(
                <Box key={elem.id}> {/* 列表渲染必须添加唯一key */}
                  <Box
                    component='img'
                    width="100%"
                    height="100%"
                    src={elem.Image}
                  />
                  <Typography>
                    {elem.Title}
                  </Typography>
                </Box>
              )
            })}
          </Box>
        )}
      </AnimatePresence>    
    </>
  )
}

额外提醒：列表渲染时记得给每个元素加唯一的key属性，避免React警告，也有助于Framer Motion正确跟踪元素。

内容的提问来源于stack exchange，提问作者K Kumar