如何在React中的两个状态之间设置动画，并在过渡期间查看这两个状态

Question

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

我从一个反作用弹簧示例的分叉中创建了一个问题的简化示例

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