React Spring延迟切换转换

Question

标题可能不到位，但我会在这里尝试解释。我一直在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>

如何在使用useTransition的React Spring中执行同样的操作？

Answer 1

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

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

方法2：通过使用额外的延迟阵列为每个项目添加不同的延迟

以下是两种方法的工作演示：https://codesandbox.io/embed/pensive-satoshi-yi4uw?fontsize=14&隐藏导航=1&主题=深色

希望这能帮助

Answer 2

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

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>
)
}
)

Answer 3

我不知道输入和离开的任何单独的时间，但您可以使用插值进行类似的操作。例如，定义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