React Transition Group:偏移动画开始时间

IT技术 css animation reactjs
2021-05-26 05:24:38

我刚开始玩 React Animations,我似乎被卡住了。

我有一系列出现的卡片(动画输入)。现在,它们都同时进入(动画同时播放)。有没有办法为动画添加偏移量,以便它们一个接一个地播放?

Animate = React.addons.CSSTransitionGroup
<Animate transitionName="cardAnim" transitionAppear={true}>
            {
                courses.map(function(element, index){
                    return (
                        <Card style={CardStyle} key={index}>
                            <CardMedia>
                                <img src={"img/courses/" + index + ".png"} />
                            </CardMedia>
                            <CardTitle>
                                {element}
                            </CardTitle>
                        </Card>
                    )
                })
            }
    </Animate>

我的目标:我希望每张卡片都分别动画,例如,第二张卡片在第一张进入后动画,第三张在第二张完成后动画,依此类推。

任何人都可以帮忙吗?谢谢 :)

1个回答

好吧,所以我想通了。关键是动画填充模式 CSS 属性。我完全删除了所有 React 动画,并继续仅使用 CSS 来解决它。

这是代码,如果有人感兴趣:

CSS:

@keyframes flyInFromBottom {
0%{
    opacity: 0;
    transform: translateY(100vh);
}
100%{
    opacity: 1;
}

}

JSX:

<Card style={{
              animation: 'flyInFromBottom 0.3s ease ' + (index+1)*0.1 + 's',
              float: 'left',
              width: 'calc(50% - 4px)',
              margin: '2px',
              opacity: '0',
              animationFillMode: 'forwards'
            }}
            key={index} onTouchTap={this.goToCourse}>
            <CardMedia>
                 <img src={"img/courses/" + index + ".png"} />
            </CardMedia>
            <CardTitle>
                  {element}
            </CardTitle>
</Card>

本质上,我使用 CSS 更改了属性,并使用 animation-fill-mode 保留它们。