时间戳

首页 > 解决方案 > 如何在 React 中的两个状态之间制作动画并在转换期间查看这两个状态

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

问题描述

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

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

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

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

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

标签： reactjsreact-spring

解决方案

问题是在过渡期间，您只能在离开和进入元素中看到当前对象。这是因为您使用状态而不是过渡的项目属性。让 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

推荐阅读