Javascript 如何在react spring中使用useTransition设置列表过滤的动画

当使用

react-spring

v9.x中的新

useTransition

进行过滤时，我尝试设置列表转换的动画，以便在过滤列表项时，剩余的项移动到它们的新位置

到目前为止，我已经成功地使列表中的组件淡入淡出，但一旦淡出动画完成，其余组件就会立即跳转到它们的新位置。我无法改变这一点

如何设置其余组件的动画以平滑移动到其新位置

下面是当前代码的一个示例

如果您在搜索栏中键入“p”，并在短时间延迟后观察名为

Plum

的组件，您可以最清楚地看到跳跃效果

App.js

从“react”导入{useState}；
从“react spring”导入{useSpring，useTransition，animated}；
导出默认函数App（）{
const[items，setItems]=useState([
{名称：“苹果”，键：1}，
{名称：“香蕉”，键：2}，
{名称：“橙色”，键：3}，
{名称：“猕猴桃”，图例：4}，
{名称：“梅花”，键：5}
]);
常量[searchText，setSearchText]=useState（“”）；
常量filteredItems=items.filter（（item）=>
item.name.toLowerCase（）.includes（searchText.toLowerCase（））
);
const transition=useTransition（filteredItems{
发件人：{opacity:0}，
输入：{opacity:1}，
左：{不透明度：0}
});
常量fadeInListItems=转换（（样式、项目）=>{
返回(
);
});
const handleSearchBarChange=（{target}）=>setSearchText（target.value）；
返回(
单击项目以切换边框颜色。
{fadeInListItems}
);
}
常量搜索栏=（道具）=>{
返回(
搜索栏：
);
};
常量项目=（道具）=>{
const[isClicked，setIsClicked]=useState（false）；
const[styles，api]=useSpring（（）=>({
边框：“2件纯黑”，
页边空白：“5px”，
边界半径：“25px”，
boxShadow：“2px 2px黑色”，
背景颜色：“白色”，
颜色：“黑色”
}));
常量handleClick=（e）=>{
api.start({
背景颜色：isClicked？“白色”：“红色”，
颜色：isClicked？“黑色”：“白色”
});
setIsClicked（（prev）=>！prev）；
};
返回(
{props.data.name}
);
};

您可以通过使用

max height

（以及淡入淡出）隐藏过滤后的元素来实现该效果。这样，项目将“折叠”，而不仅仅是褪色，所以剩余的元素将“滑动”起来

过渡

const transition = useTransition(filteredItems, {
  from: { opacity: 0, marginTop: 5 },
  enter: { opacity: 1, maxHeight: 50, marginTop: 5 },
  leave: { opacity: 0, maxHeight: 0, marginTop: 0 }
});

我还添加了

overflow:hidden

以完成

maxHeight

的效果，并删除了

项的
边距：5px
，因为我在转换-定义中添加了边距

const[style，api]=useSpring（（）=>({
边框：“2件纯黑”，
--页边空白：“5px”，
边界半径：“25px”，
boxShadow：“2px 2px黑色”，
背景颜色：“白色”，
颜色：“黑色”，
++溢出：“隐藏”，
}));

这是病。我想我可能会改变的一件事是错开不透明度的改变和最大高度的动画，比如：触感很好！！：）这是一种比我以前更简单的方法。看起来棒极了@谢谢你！很高兴我能帮忙