Проблема в том, что при нажатии на кнопку удаления анимируются все элементы, но если убрать exitBeforeEnter
, то все работает нормально. Убирать его не вариант, т.к в таком случае в проекте пропадает плавная смена элементов при смене пункта меню.
import React from "react";
import "./styles.css";
import { motion, AnimatePresence } from "framer-motion";
export default function App() {
const [items, setItems] = React.useState([
{ name: "1 item" },
{ name: "2 item" },
{ name: "3 item" },
{ name: "4 item" },
{ name: "5 item" },
{ name: "6 item" }
]);
const deleteItem = (item) => {
setItems(items.filter((el) => item !== el));
};
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<AnimatePresence initial={false} exitBeforeEnter>
{items.map((el, id) => (
<motion.div
key={id}
style={{
background: "#eee",
width: "200px",
margin: "10px",
padding: "10px"
}}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 1 }}
>
{el.name}
<strong
onClick={() => deleteItem(el)}
style={{ float: "right", marginRight: "10px" }}
>
X
</strong>
</motion.div>
))}
</AnimatePresence>
</div>
);
}
https://codesandbox.io/s/cool-mclaren-nfi0g?file=/src/App.js