如何为带有React过渡组的每个项目使用不同的延迟？ [英] How to use a different delay for each item with React transition group?

问题描述

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

I am animating the entry and exit of an array of items using TransitionGroup and CSSTransition (with a fade effect). I would like the items to appear with a slight delay between them instead of all at the same time. Note that the delay can be lower than the duration of the animation.

使用我当前的代码，所有项目都同时在淡入（如预期的那样）。在我的渲染函数中，我需要执行以下操作以动画化组件的进入和退出：

With my current code, all the items are fading-in at the same time (as expected). In my render function, I have the following to animate the entry and exit of my components:

<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;
}

我将如何为每个项目添加不同的延迟？

How would I go about adding a different delay for each item?

推荐答案

我通过添加 transitionDelay 以我的<$样式解决了我的问题c $ c> ItemPreview 以及动态更改每个项目的超时时间。

I solved my issue by adding a transitionDelay in the style of my ItemPreview as well as changing the timeout dynamically for each item.

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

The tricky part is to calculate the actual delay for each item, especially when loading new items afterwards. I ended up adding a isNew field in my items in the reducer which is set to true only for newly loaded items. This is not ideal as it involves changing my data just for animations.

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>
    )
}

这篇关于如何为带有React过渡组的每个项目使用不同的延迟？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！