React-Spring 交换动画错误

Question

我正在尝试一个非常简单的动画来与 @react-spring/web 交换两个 Div 位置，但我不能。它似乎部分有效，但我不明白为什么。

据我猜测，

useSprings

钩子并没有从 DOM 中删除前一个节点，但我不知道该怎么做。我必须使用其他钩子吗？

这是codesandbox链接，https://codesandbox.io/p/sandbox/still-cookies-yf2sky

非常感谢评论和帮助！

  const [coord, setCoord] = useState<{ x: Number; y: number }[]>(initialCoords);

  const [springs, api] = useSprings(2, (i) => ({
    from: {
      x: coord[i].x,
      y: coord[i].y,
    },
  }));

  const box1Ref = useRef<HTMLInputElement | null>(null);
  const box2Ref = useRef<HTMLInputElement | null>(null);

  const swapBoxes = () => {
    let newCoord = [coord[1], coord[0]];

    api.start((i) => {
      return {
        from: { ...coord[i] },
        to: { ...newCoord[i] },
      };
    });

    setCoord(newCoord);
  };

//...
   return
     <div>
        <animated.div style={springs[0]}>
          <div
            style={{ border: "1px solid red", width: "100px", height: "100px" }}
          >
            A
          </div>
        </animated.div>

        <animated.div style={springs[1]}>
          <div
            style={{ border: "1px solid red", width: "100px", height: "100px" }}
          >
            B
          </div>
        </animated.div>
      </div>

Answer 1

好的，我现在明白了。我错过了 CSSProperties 位置：每个动画.div 的绝对位置。