8

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>

And the 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?

4

2 回答 2

11

我通过添加我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>
    )
}
于 2018-04-24T11:28:12.247 回答
0

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

我正在使用<Transition>并且我已经使用for循环解决了SCSS：

.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;
    }
  }
于 2020-05-03T11:36:08.830 回答