Exit Property not working in Framer Motion with react js

huangapple
go评论96阅读模式
英文:

Exit Property not working in Framer Motion with react js

问题

以下是代码的翻译部分：

Framer Motion中的Exit Property不起作用，使用React JS一切都正常，但退出动画无效，我已经尝试了一个星期，请帮帮我！

我已安装了最新版本的Framer Motion "framer-motion": "^10.10.0"，但退出属性仍然没有响应。

  1. import React, { useEffect, useState, useRef } from 'react';
  2. import { Box, Grid, CardContent, CardActionArea, CardMedia, Typography, styled, List, ListItem, createStyles, Card, TextField, Link, Button, TextareaAutosize } from '@mui/material';
  3. import { motion, useScroll, AnimatePresence } from 'framer-motion';
  4. import '../Style/app.css';
  5. import axios from 'axios';
  6. import CancelIcon from '@mui/icons-material/Cancel';
  8. export default function Carosel({ handleClose }) {
  9.   const [post, setpost] = useState([]);
  11.   const getload = async () => {
  12.     const response = await axios.get('http://127.0.0.1:8000/media/carosel');
  13.     console.log(response.data);
  14.     console.log(post);
  15.     setpost(response.data);
  16.     console.log(post);
  17.   }
  19.   useEffect(() => {
  20.     getload();
  21.   }, [])
  23.   const dropIn = {
  24.     hidden: {
  25.       y: "100vh",
  26.       opacity: 0,
  27.     },
  28.     visible: {
  29.       y: "0",
  30.       opacity: 1,
  31.       transition: {
  32.         duration: 1.5,
  33.         type: "spring",
  34.         damping: 35,
  35.         stiffness: 100,
  36.       },
  37.     },
  38.     exit: {
  39.       y: "-100vh",
  40.       opacity: 0,
  41.       transition: {
  42.         duration: 1.5,
  43.         type: "spring",
  44.         damping: 35,
  45.         stiffness: 100,
  46.       },
  47.     },
  48.   };
  50.   return (
  51.     <>
  52.       <AnimatePresence mode='wait'>
  53.         <Box
  54.           component={motion.div}
  55.           variants={dropIn}
  56.           initial="hidden"
  57.           animate="visible"
  58.           exit="exit"
  59.           onClick={(e) => e.stopPropagation()}
  60.         >
  61.           <Button>
  62.             <CancelIcon />
  63.           </Button>
  64.           {post.map(elem => {
  65.             return (
  66.               <Box>
  67.                 <Box
  68.                   component='img'
  69.                   width="100%"
  70.                   height="100%"
  71.                   src={elem.Image}
  72.                 ></Box>
  73.                 <Typography>
  74.                   {elem.Title}
  75.                 </Typography>
  76.               </Box>
  77.             )
  78.           })}
  79.         </Box>
  80.       </AnimatePresence>
  81.     </>
  82.   )
  83. }
英文:

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.

  1. import React ,{useEffect , useState ,useRef } from &#39;react&#39;;
  2. import { Box, Grid,CardContent ,CardActionArea,CardMedia, Typography, styled, List, ListItem, createStyles, Card, TextField, Link, Button, TextareaAutosize } from &#39;@mui/material&#39;;
  3. import {motion , useScroll,AnimatePresence } from &#39;framer-motion&#39;
  4. import &#39;../Style/app.css&#39;
  5. import axios from &#39;axios&#39; 
  6. import CancelIcon from &#39;@mui/icons-material/Cancel&#39;;
  7. export default function Carosel({handleClose}) {
  8. const [post,setpost] = useState([]);
  9. const getload = async()=&gt;{
  10. const response = await axios.get(&#39;http://127.0.0.1:8000/media/carosel&#39;);
  11. console.log(response. Data);
  12. console.log(post);
  13. setpost(response.data);
  14. console.log(post);
  15. }
  16. useEffect(()=&gt;{
  17. getload();
  18. },[])
  19. const dropIn ={
  20. hidden:{
  21. y:&quot;100vh&quot;,
  22. opacity:0,
  23. },
  24. visible:{
  25. y:&quot;0&quot;,
  26. opacity:1,
  27. transition:{
  28. duration:1.5,
  29. type:&quot;spring&quot;,
  30. damping:35,
  31. stiffness:100,
  32. },
  33. },
  34. exit:{
  35. y:&quot;-100vh&quot;,
  36. opacity:0,
  37. transition:{
  38. duration:1.5,
  39. type:&quot;spring&quot;,
  40. damping:35,
  41. stiffness:100,
  42. },
  43. },
  44. };
  45. return (
  46. &lt;&gt;
  47. &lt;AnimatePresence mode=&#39;wait&#39;&gt;
  48. &lt;Box
  49. component={motion.div}
  50. variants={dropIn}
  51. initial=&quot;hidden&quot;
  52. animate=&quot;visible&quot;
  53. exit=&quot;exit&quot;
  54. onClick={(e)=&gt; e.stopPropagation()}
  55. &gt;
  56. &lt;Button&gt;
  57. &lt;CancelIcon /&gt;
  58. &lt;/Button&gt;
  59. {post. Map(elem)=&gt;{
  60. return(
  61. &lt;Box&gt;
  62. &lt;Box
  63. component=&#39;img&#39;
  64. width=&quot;100%&quot;
  65. height=&quot;100%&quot;
  66. src={elem.Image}
  67. &gt;
  68. &lt;/Box&gt;
  69. &lt;Typography&gt;
  70. {elem.Title}
  71. &lt;/Typography&gt;
  72. &lt;/Box&gt;
  73. )
  74. })
  75. }
  76. &lt;/Box&gt;
  77. &lt;/AnimatePresence&gt;    
  78. &lt;/&gt;
  79. )
  80. }

答案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.

huangapple
  • 本文由 发表于 2023年4月11日 16:41:53
  • 转载请务必保留本文链接：https://go.coder-hub.com/75983956.html
  • framer-motion
  • framerjs
  • javascript
  • material-ui
  • reactjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定