CODEWITHSUNDEEP
reactjscss-animationsarray.prototype.map
byte03
byte03

Reputation: 1

How to sequentially display items list with React

I want to display an entire array of milestones, but I need to be sequentially. For example: first appear milestones[0], then milestones[1], then milestones[2], and so on.

So I have a milestones.map() to create a card for each milestone and tried to add a settimeout to "slow down" the .map(), but this doesn't work.

Being more graphic, I have this and I need this

This is the code I have:

return (
   <TransitionGroup className='listOfMilestones'>
       {milestones.map((milestone) => {
          return (
             <CSSTransition
             key={milestone.id}
             timeout={500}
             classNames='eachMilestone'
             >
                <MilestoneCard
                  ageRange={ageRange}
                  id={milestone.id}
                  title={milestone.title}
                  answer={milestone.answer}
                 />
             </CSSTransition>
           }
      }
   </TransitionGroup>
)

And this is the CSS:

.eachMilestone-enter {
  opacity: 0.01;
  transform: translateY(40px);
}

.eachMilestone-enter-active {
  opacity: 1;
  transform: translateY(0px);
  transition: 500ms ease-in;
}

Upvotes: 0

Views: 206

Answers (1)

larz
larz

Reputation: 5766

So it seems like you need to timeout to increase for each item in milestones. Maybe use the index from map and do something like

timeout={500 + 100 * i}

The first item would have a 500ms timeout, the second 600 and so on. You can tweak that to delay as you intend.

Upvotes: 1

Related Questions