gpt4 book ai didi

javascript - 使用 React-spring 为有条件渲染的组件设置动画的问题

转载 作者:行者123 更新时间:2023-11-29 22:48:07 25 4
gpt4 key购买 nike

我是 react-spring 的新手。每当组件卸载时,我都无法为其设置动画。我有一个带有 onClick 处理程序的简单卡片,负责有条件地显示我的 Overlay 组件。安装时动画工作正常(从&输入工作),但是当关闭覆盖时,组件只是消失而没有动画(离开不起作用)。我怀疑这是因为组件的条件渲染,但我一直在努力寻找解决方案。任何帮助将不胜感激!

我当前的代码: https://codesandbox.io/s/dry-leftpad-h3vmv
我想要实现的目标: https://codesandbox.io/s/048079xzw

附言后者使用 mauerwerk 的库。我不想使用它。

最佳答案

你错过的是这个:

return expand.map(({ item, props, key }) => (
item && <animated.div
// ...etc

当您使用 useTransition 控制单个组件的安装时,您需要根据传递的 item 有条件地呈现它。在您的情况下,当它为 false 时,它不会呈现(如果已经安装,它将卸载),当它为 true 时,它将呈现(如果卸载则安装)。

这是一个从您的沙箱中派生出来的工作沙箱:https://codesandbox.io/s/infallible-agnesi-cty5g .

更多信息

useTransition 的第一个参数是您要转换的列表。它会监视变化并发回一个与每个项目映射的数组、一个键和一个基于项目是真实的(进入)还是虚假的(离开)的样式对象 (props)。因此,对于安装/卸载单个元素的过渡,基于项目真实性的条件渲染是关键。

查看 the examples again here您会看到转换列表、两个元素之间的切换和单个项目之间的区别。

对于列表,不需要检查项目是否存在,因为数组改变了。

为了在两个元素之间切换,您使用 item 的真实性来确定要呈现哪个元素。

对于单个元素,item 决定是否渲染。这意味着当您默认为 false 时它最初不会挂载,并且将确保您不会在 isActive 值更改时呈现 2 个项目。

关于javascript - 使用 React-spring 为有条件渲染的组件设置动画的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57950730/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com