英文:
Exit Property not working in Framer Motion with react js
问题
以下是代码的翻译部分：
Framer Motion中的Exit Property不起作用，使用React JS一切都正常，但退出动画无效，我已经尝试了一个星期，请帮帮我！
我已安装了最新版本的Framer Motion "framer-motion": "^10.10.0"，但退出属性仍然没有响应。
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>
</>
)
}
英文:
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>
</>
)
}
答案1
得分: 1
从文档中：
直接子元素必须分别具有唯一的
key属性，以便AnimatePresence可以跟踪它们在树中的存在。
如果您为主要的 Box 组件添加一个 key 属性，它应该正常工作。
英文:
From the docs:
> Direct children must each have a unique key prop so AnimatePresence can track their presence in the tree.
If you add a key prop to your main Box component it should work.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论