反应过渡小组：胶印动画开始定时 [英] React Transition Group: Offset animation start timing

问题描述

我刚开始作出反应动画玩弄，我似乎被卡住。

I just started playing around with React Animations, and I seem to be stuck.

我有一系列的出现（动画式）卡。现在，他们都在同一时间进来（动画播放在同一时间）。有没有一种方法来添加，使他们在其他以后玩一偏移到动画？

I have a series of Cards that appear (animate-in). Right now, they're all coming in at the same time (the animation plays at the same time). Is there a way to add an offset to the animation so that they play one after the other?

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>

我的目标：我希望每个卡分别以动画，如，第二个卡动画中的第一个进入之后，第三个动画之后第二个完成，依此类推。

My aim: I want each Card to animate in separately, as in, the second card animates in after the first one has entered, the third animates after the second one is done, and so on.

谁能帮助？感谢：）

推荐答案

好吧，我想通了。
关键是动画填充模式CSS属性。我彻底删除了所有的动画做出反应并着手仅使用CSS看着办吧。

All right, so I figured it out. The key was the animation-fill-mode CSS property. I completely removed all React Animations and proceeded to figure it out using CSS only.

这里的code，如果有人有兴趣：

Here's the code, if anyone is interested:

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属性，并使用动画填充模式坚持他们。

Essentially, I changed properties using CSS and persisted them using animation-fill-mode.

这篇关于反应过渡小组：胶印动画开始定时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！