我正在使用动画来制作一系列项目的进入和退出TransitionGroup
and CSSTransition
(具有淡入淡出效果)。我希望这些项目之间有轻微的延迟,而不是同时出现。请注意,延迟可以低于动画的持续时间。
使用我当前的代码,所有项目都会同时淡入(如预期)。在我的渲染函数中,我使用以下命令来动画组件的进入和退出:
<TransitionGroup>
items.map((item,index) => (
<CSSTransition
key={item.id}
timeout={1000}
classNames="fade"
<ItemPreview item={item} />
</CSSTransition>
))
</TransitionGroup>
还有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;
}
我将如何为每个项目添加不同的延迟?
我通过添加解决了我的问题transitionDelay
以我的风格ItemPreview
以及动态更改每个项目的超时。
棘手的部分是计算每个项目的实际延迟,尤其是在之后加载新项目时。我最终添加了一个isNew
我的领域items
在减速器中设置为true
仅适用于新加载的项目。这并不理想,因为它涉及仅为动画更改我的数据。
render(){
const { items } = this.props;
let delay_index = -1;
let delay_jump = 100;
return (
<TransitionGroup>
items.map((item,index) => {
delay_index += offer.isNew ? 1 : 0;
const delay = Math.max(0, delay_index*100);
return (
<CSSTransition
key={item.id}
timeout={1000 + delay}
classNames="fade">
<ItemPreview
item={item}
style={{transitionDelay: `${delay}ms`}} />
</CSSTransition>
)
})
</TransitionGroup>
)
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)