我如何在 React 中的两个状态之间设置动画并在转换期间查看两个状态

Question

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

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

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

通过向前和向后单击会发生幻灯片过渡，但离开动画和进入动画的状态会立即发生变化。我想保留当前状态以供休假，并保留新状态以供进入。

我也希望能动态改变方向

Answer 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

我如何在 React 中的两个状态之间设置动画并在转换期间查看两个状态

How can I animate between 2 states in React and see both states during transition

reactjs

react-spring