为什么这个 react-spring 动画在动画期间会改变它的 margin-top？

Question

我有一个 react-spring 动画，它包括让组件在滑动时出现。但是在这个动画中，组件在恢复正常之前改变了它的边距顶部。如何解决这个问题？

这是代码和沙箱：

import React, { useEffect, useMemo, useState } from "react";
import styled, { css, keyframes } from "styled-components";
import { animated, useTransition } from "react-spring";

const Tabs = styled.div`
  display: flex;
  margin-bottom: 12px;
`;

const Tab = styled.button<{ active: boolean }>`
  margin: 0 4px;
  border-bottom: 1px solid transparent;
  font-weight: ${({ active }) => active && 600};
  cursor: pointer;
  background: transparent;
  border: 0;
  &:focus {
    outline: none !important;
  }
`;

export default function Inbox() {
  const [tab, setTab] = useState(0);

  const transitions = useTransition(tab, (p) => p, {
    from: { opacity: 0, transform: "translate3d(100%,0,0)" },
    enter: { opacity: 1, transform: "translate3d(0%,0,0)" },
    leave: { opacity: 0, transform: "translate3d(-50%,0,0)" }
  });

  const getList = (name: string) => <div>{name}</div>;

  const pages = [
    ({ style }) => (
      <animated.div style={style}>{getList("test 1")}</animated.div>
    ),
    ({ style }) => (
      <animated.div style={style}>{getList("test 2")}</animated.div>
    )
  ];

  return (
    <>
      <Tabs>
        <Tab onClick={() => setTab(0)} active={tab === 0}>
          Unread
        </Tab>
        <Tab onClick={() => setTab(1)} active={tab === 1}>
          All
        </Tab>
      </Tabs>
      {transitions.map(({ item, props, key }) => {
        const Page = pages[item];
        return <Page key={key} style={props} />;
      })}
    </>
  );
}

沙盒：https://codesandbox.io/s/amazing-ride-hwbv2?file=/src/App.tsx

Answer 1

这不是您看到的边距顶部。它是旧组件向左侧移动并改变不透明度，但它仍然存在。最后，它在新组件处于垂直位置的那一刻被卸载。大多数时候，我们使用绝对位置，新旧组件相互重叠。这样，卸载时就没有颠簸。像这样的：

from: { opacity: 0, transform: "translate3d(100%,0,0)", position: "absolute" },