React Transition Group：偏移动画开始时间答案

【问题标题】：React Transition Group: Offset animation start timingReact Transition Group：偏移动画开始时间
【发布时间】：2015-10-02 09:17:55
【问题描述】：

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

我的目标：我希望每张卡片都单独制作动画，例如，第二张卡片在第一张卡片进入后制作动画，第三张卡片在第二张卡片完成后制作动画，依此类推。

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

【问题讨论】：

当我回答this question 时，我创建了this JSFiddle，它实现了这样的功能；你可能会在那里找到一些有用的东西。请注意，它不使用 CSS 过渡。 jsfiddle.net/BinaryMuse/f51jbw2k
@BinaryMuse：你写了StaggerIn组件吗？真的很酷
@DhirajBodicherla 谢谢，是的，所有这些都是为了演示低级 React 动画回调而创建的。
@BinaryMuse 嘿，感谢您的评论。我查看了您的代码，它启发了我尝试在没有 React 动画的情况下执行此操作，并且我成功了：D 谢谢 :)

标签： css animation reactjs

【解决方案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 更改属性并使用动画填充模式将它们持久化。

【讨论】：