React Spring 延迟切换转换

Question

标题可能不准确，但我会尝试在这里解释一下。我一直在模式下使用SwitchTransitionin-out，但由于我的动画主要是使用包中的钩子 useSpring 完成的react-spring，所以我宁愿React Transition Group完全放弃。但我不太确定如何达到同样的效果。当发生转换（对于路由）时，我需要旧组件保持可见（例如 2000 毫秒），而新组件已经可见。useTransition看看中的钩子，react-spring我看不出有什么办法可以为 引入延迟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？

Answer 1

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

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

方法2：通过使用附加延迟数组为每个项目添加不同的延迟

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

希望这对某人有帮助