如何为带有React过渡组的每个项目使用不同的延迟？

2022-12-20 15:10| 来源: 网络整理| 查看: 265

我正在使用TransitionGroup和CSSTransition（带有淡入淡出效果）对一系列项目的进入和退出进行动画处理。我希望这些项目在它们之间出现延迟，而不是同时出现。请注意，延迟可以低于动画的持续时间。

使用我当前的代码，所有项目都同时在淡入（如预期的那样）。在我的渲染函数中，我可以使用以下内容为组件的入口和出口设置动画：

items.map((item,index) => ( ))

和CSS：

.fade-enter{ opacity: 0; visibility: hidden; transition: all ease 1s; } .fade-enter.fade-enter-active{ opacity: 1; visibility: visible; transition: all ease 1s; } .fade-exit { visibility: visible; opacity: 0; } .fade-exit.fade-exit-active{ opacity: 0; visibility: hidden; transition: all ease 1s; }

如何为每个商品添加不同的延迟？

1> nbeuchat..：

我通过添加transitionDelay样式ItemPreview以及动态更改每个项目的超时来解决我的问题。

棘手的部分是计算每个项目的实际延迟，尤其是事后加载新项目时。我最终在化简器中添加了一个isNew字段，该字段仅items设置true为新加载的项目。这并不理想，因为它涉及仅为动画更改我的数据。

render(){ const { items } = this.props; let delay_index = -1; let delay_jump = 100; return ( items.map((item,index) => { delay_index += offer.isNew ? 1 : 0; const delay = Math.max(0, delay_index*100); return ( ) }) ) }

【本文地址】

公司简介

联系我们