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

Question

我正在使用 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;
}

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

Answer 1

我通过在 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: `${delay}ms`}} />             
                    </CSSTransition>
                )
            })
        </TransitionGroup>
    )
}

Answer 2

我可能来不及了，但我在进入动画时遇到了同样的问题，我的解决方案可能对其他人有用。

我正在使用 <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(#{$i}n) {
        transition-delay: #{$i * 0.25}s;
      }
    }

    &.entering,
    &.entered {
      opacity: 1;
      visibility: visible;
    }
  }

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

How to use a different delay for each item with React transition group?

javascript

reactjs

css-transitions

react-transition-group