Question

我刚刚开始使用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>

我的目标：我希望每张卡片分别动画，如第二张卡片在第一张卡片输入后动画，第三张卡片在第二张卡片完成后动画，依此类推。

有人可以帮忙吗？谢谢:)）

Answer 1

好的，所以我明白了。关键是动画填充模式CSS属性。我完全删除了所有的React Animations并继续使用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更改了属性，并使用动画填充模式将它们持久化。

反应过渡组：偏移动画开始时间

1 个答案: