如何使用 React 过渡组对每个项目使用不同的延迟?

Posted

技术标签:

【中文标题】如何使用 React 过渡组对每个项目使用不同的延迟?【英文标题】:How to use a different delay for each item with React transition group? 【发布时间】:2018-10-03 18:49:34 【问题描述】:

我正在使用TransitionGroupCSSTransition(带有淡入淡出效果)为一组项目的进入和退出设置动画。我希望这些项目在它们之间出现轻微延迟,而不是同时出现。请注意,延迟可以低于动画的持续时间。

使用我当前的代码,所有项目都同时淡入(如预期的那样)。在我的渲染函数中,我有以下动画组件的进入和退出:

<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】:

我可能为时已晚,但我在输入动画时遇到了同样的问题,我的解决方案可能对其他人有用。

我正在使用&lt;Transition&gt;,我已经在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 过渡设置动画?

如何使用 ESLint 检查 React/Typescript 项目中的 prop 错误?

如何实现在悬停反应路由器链接时显示下划线的过渡效果?

react——样式——过渡动画组件——结合animate库