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

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

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

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

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

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

stack overflow How can I animate between 2 states in React and see both states during transition
原文答案
author avatar

接受的答案

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


答案:

相关问题