如何在 React 中的两个状态之间制作动画并在转换期间查看这两个状态

【问题标题】：How can I animate between 2 states in React and see both states during transition如何在 React 中的两个状态之间制作动画并在转换期间查看这两个状态
【发布时间】：2020-08-14 20:49:11
【问题描述】：

我有一个用于导航列表的组件，当我选择一个项目时，我想滑入另一个列表，但使用了相同的组件，唯一的区别是状态。我很难理解如何在幻灯片过渡期间看到两种状态（几乎像 2 个组件）

我从一个 react-spring 示例的分支创建了一个简化的问题示例

https://codesandbox.io/s/affectionate-morning-1rdw6

通过单击前进和后退会发生幻灯片转换，但离开动画和进入动画的状态都会立即更改。我想保持当前状态离开，进入新状态。

我也希望能够动态改变方向

【问题讨论】：

标签： reactjs react-spring

【解决方案1】：

问题在于，在过渡期间，您只能在离开和进入元素中看到当前对象。这是因为您使用状态而不是过渡的项目属性。让 useTransition 处理状态变化，它知道哪个元素离开，哪个进入：

    {transitions.map(({ item, props, key }) => {
      return (
        <animated.div key={key} style={{ ...props, background: pages[item].background }}>
          {pages[item].text}
        </animated.div>
      )
    })}

方向变化几乎与评论中一样。确保三元运算中的条件与方向值匹配。例如，如果您将方向设置为 1 和 0（而不是 1 和 -1），那么您的原始条件应该可以工作。

  from: { opacity: 0, transform: `translate3d(${currentState.direction ? '200%': '-200%'},0,0)` },
  enter: { opacity: 1, transform: 'translate3d(0%,0,0)' },
  leave: { opacity: 0, transform: `translate3d(${currentState.direction ? '-200%': '200%'},0,0)` },

https://codesandbox.io/s/distracted-lamport-6pkup?file=/src/index.js

【讨论】：