如何使用 React 过渡组对每个项目使用不同的延迟?
Posted
技术标签:
【中文标题】如何使用 React 过渡组对每个项目使用不同的延迟?【英文标题】:How to use a different delay for each item with React transition group? 【发布时间】:2018-10-03 18:49:34 【问题描述】:我正在使用TransitionGroup
和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;
如何为每个项目添加不同的延迟?
【问题讨论】:
【参考方案1】:我可能为时已晚,但我在输入动画时遇到了同样的问题,我的解决方案可能对其他人有用。
我正在使用<Transition>
,我已经在SCSS
中使用for
循环解决了:
.fade
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease-in, visibility 0.5s;
// adjust for loop to total number of elements
@for $i from 1 through 5
&:nth-child(#$in)
transition-delay: #$i * 0.25s;
&.entering,
&.entered
opacity: 1;
visibility: visible;
【讨论】:
【参考方案2】:我通过以 ItemPreview
的样式添加 transitionDelay
以及为每个项目动态更改超时来解决了我的问题。
棘手的部分是计算每个项目的实际延迟,尤其是在之后加载新项目时。我最终在减速器的items
中添加了一个isNew
字段,该字段设置为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: `$delayms` />
</CSSTransition>
)
)
</TransitionGroup>
)
【讨论】:
以上是关于如何使用 React 过渡组对每个项目使用不同的延迟?的主要内容,如果未能解决你的问题,请参考以下文章
react, css) 淡入淡出的过渡 css,当背景图像用 className 改变时
如何使用 React-Bootstrap 平滑水平折叠过渡?
如何使用 createBottomTabNavigator 为 React Navigation 过渡设置动画?