Geek Answers Handbook

React Transition Group: Offset Animation Start Time

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

I have a number of cards that appear (animated). Right now, they all go 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 by one?

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 goal: I want each Card to live separately, as well as the second, after the first entered it, the second animation after the second is done, etc.

Can anyone help? Thanks:)

+2
source share
1 answer

Ok, so I figured it out. The key was the CSS property of the fill animation. I completely removed all React Animations and started using it with CSS only.

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>

Essentially, I changed the properties using CSS and saved them using the animation fill mode.

+1
source

More articles:


All Articles