1

我有一排水平的盒子，右对齐。我想在右侧添加一个新盒子，让它逐渐滑入，同时将其他盒子向左移动。

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. 现有的盒子在移动后会产生类似弹簧的振动。相反，我希望他们平稳地移动到他们的目的地，而不是超越它并振荡。

关于从这里去哪里的任何想法？

我使用了 framer-motion，但我并不喜欢它，如果另一个库使这更容易的话。

4

1 回答 1

1

positionTransition 只需要一个匹配的弹簧。

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

请参阅示例https://codesandbox.io/s/kind-mendel-zl1fl?file=/src/App.js

于 2020-04-12T17:04:15.110 回答