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

Posted 2023-03-06

【中文标题】React Transition Group：偏移动画开始时间

【英文标题】：React Transition Group: Offset animation start timing

【发布时间】：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 谢谢 :)

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