У меня есть горизонтальный ряд ящиков, выровненных по правому краю. Я хочу добавить новый блок с правой стороны, чтобы он постепенно скользил, перемещая другие блоки влево при этом.
https://codesandbox.io/s/vibrant-curran-xqcbh?file=/src/App.js — вот куда я попал. Вот мой код:
import { motion, AnimatePresence } from "framer-motion";
import React, { useState } from "react";
import "./styles.css";
export default function App() {
const [texts, setTexts] = useState(["foo", "foo"]);
return (
<div className="m-2">
<button
className="btn btn-primary mb-3"
onClick={() => {
setTexts([...texts, "bar"]);
}}
>
Add box
</button>
<div className="d-flex justify-content-end">
<AnimatePresence initial={false}>
{texts.map((text, i) => (
<motion.div
key={i}
positionTransition
initial={{ x: 100 }}
animate={{ x: 0 }}
transition={{ duration: 2, type: "tween" }}
>
<div className="alert alert-primary mr-2" style={{ width: 100 }}>
{text}
</div>
</motion.div>
))}
</AnimatePresence>
</div>
</div>
);
}
Есть две проблемы:
- Все существующие ящики перемещаются влево гораздо быстрее, чем следующий ящик.
- Существующие ящики имеют пружинные колебания после перемещения. Вместо этого я хотел бы, чтобы они плавно двигались к месту назначения, не промахивались и не колебались.
Любые идеи о том, куда идти отсюда?
Я использовал framer-motion, но я не привязан к нему, если другая библиотека сделает это проще.