React Spring 延迟切换转换答案

【问题标题】：React Spring delay switching transitionsReact Spring 延迟切换转换
【发布时间】：2021-07-12 12:05:08
【问题描述】：

标题可能不在现场，但我会在这里尝试解释。我一直在in-out 模式下使用SwitchTransition，但由于我的动画主要是使用react-spring 包中的钩子useSpring 完成的，所以我宁愿完全从React Transition Group 移动。但我不太确定如何达到相同的效果。当发生转换时（对于路由），我需要旧组件保持可见（比如 2000 毫秒），而新组件已经可见。查看react-spring 中的钩子useTransition，我看不到为leave 引入延迟的方法。

const transition = useTransition(show, null, {
  from: { opacity: 0 },
  enter: { opacity: 1 },
  leave: { opacity: 0 },
  config: {
    duration: 200, // duration for the whole animation form start to end
  },
})

在SwitchTransition 中会是这样的：

<SwitchTransition mode='in-out'>
  <CSSTransition
    key={location.pathname}
    timeout={{ enter: 2000, exit: 400 }}
    unmountOnExit
    onEnter={()=>{callback}}
  >
    /* here go routes */
  </CSSTransition>
</SwitchTransition>

如何在 React Spring 中使用 useTransition 做同样的事情？

【问题讨论】：

标签： reactjs react-spring

【解决方案1】：

方法一：最简单的一种，使用trail属性

const transition = useTransition(show, null, {
  from: { opacity: 0 },
  enter: { opacity: 1 },
  leave: { opacity: 0 },
  trail:150
})

方法二：使用额外的延迟数组为每一项添加不同的延迟

这是两种方法的工作演示： https://codesandbox.io/embed/pensive-satoshi-yi4uw?fontsize=14&hidenavigation=1&theme=dark

希望这对某人有所帮助

【讨论】：

【解决方案2】：

我不知道进入和离开的任何单独时间，但你可以用插值做类似的事情。例如，您定义 x 值而不是不透明度。

  const transition = useTransition(show, s => (s ? "on" : "off"), {
    from: { x: 0 },
    enter: { x: 1 },
    leave: { x: 2 },
    config: {
      duration: 4000 // duration for the whole animation form start to end
    }
  });

在渲染方法中，您可以从 x 插入不透明度：

    {transition.map(({ item, props, key }) => (
      <animated.div
        key={key}
        style={{
          opacity: props.x.interpolate({
            range: [0.0, 1, 1.25, 2],
            output: [0, 1, 0, 0]
          })
        }}
      >
        {item ? "on" : "off"}
      </animated.div>
    ))}

那么这里发生了什么？持续时间为 4 秒。当输入 x 从 0 到 1 时，它会在整个 4 秒内将不透明度插值为 0 到 1。离开时 x 变为 1 到 2。它首先将 1 到 1.25 插值为不透明度 1 到 0，然后不透明度保持 0 到动画的其余部分。因此，将动画不透明度从 1 更改为 0 大约会在 1 秒内发生。

你怎么看？

这里是一个例子：https://codesandbox.io/s/zen-curran-nnuiu

【讨论】：

【解决方案3】：

我想我一点也不明白，但你可以添加延迟道具并添加一个函数而不是像这样的对象：

 let location = useLocation();
  const transition = useTransition(location, {
      from: { opacity: 0 },
      enter: item => async (next, cancel) => {
          await next({ opacity: 1, y: 0, })
          await next({ opacity: 1, y: 70, })
        },
      leave: { opacity: 0, delay:400 },
    })

并修改适合您的序列。我完全确定您可以在这里找到其他信息： https://react-spring.io/hooks/use-transition

transition(
  (props, item) => {
    return (
      <a.div className='main' style={props} >
        <Switch location={item} >
          <Route path='/hours' component={HoursPage} />
          <Route path='/city' component={CityPage} />
          <Route path='/' component={InicioPage} />
        </Switch>
      </a.div>
    )
  }
)

【讨论】：