Exit Property not working in Framer Motion with react js Everything is going well but exit motion is not working i am trying this for more than a week please help me!
Exit Property not working in Framer Motion with react js Everything is going well but exit motion is not working i am trying this for more than a week please help me!I have installed latest version of framer motion "framer-motion": "^10.10.0", But also no response on exit property.
import React ,{useEffect , useState ,useRef } from 'react';
import { Box, Grid,CardContent ,CardActionArea,CardMedia, Typography, styled, List, ListItem, createStyles, Card, TextField, Link, Button, TextareaAutosize } from '@mui/material';
import {motion , useScroll,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 getload = async()=>{
const response = await axios.get('http://127.0.0.1:8000/media/carosel');
console.log(response. Data);
console.log(post);
setpost(response.data);
console.log(post);
}
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'>
<Box
component={motion.div}
variants={dropIn}
initial="hidden"
animate="visible"
exit="exit"
onClick={(e)=> e.stopPropagation()}
>
<Button>
<CancelIcon />
</Button>
{post. Map(elem)=>{
return(
<Box>
<Box
component='img'
width="100%"
height="100%"
src={elem.Image}
>
</Box>
<Typography>
{elem.Title}
</Typography>
</Box>
)
})
}
</Box>
</AnimatePresence>
</>
)
}
