Анимация добавления ящика в список ящиков в React - PullRequest
Новая
       31

Анимация добавления ящика в список ящиков в React

1 голос
/ 12 апреля 2020

У меня горизонтальный ряд ящиков, выровненных по правому краю. Я хочу добавить новый блок справа, постепенно вставляя его, перемещая остальные блоки влево, как это происходит.

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>
  );
}

Есть две проблемы:

  1. Все существующие блоки перемещаются намного быстрее влево, чем следующий блок.
  2. Существующие блоки есть пружинные колебания после того, как они двигаются. Вместо этого я хотел бы, чтобы они плавно двигались к месту назначения, а не перегоняли его и колебались.

Любые идеи о том, куда go отсюда?

Я использовал framer-motion, но Я не предан этому, если другая библиотека делает это проще.

1 Ответ

1 голос
/ 12 апреля 2020

Просто нужна соответствующая пружина для положения перехода. 

  const spring = {
      duration: 2,
      type: "tween"
  };
  ...
  positionTransition={spring}

См. Пример https://codesandbox.io/s/kind-mendel-zl1fl?file= / src / App. js

...