Animate (fadeIn) 5 elements one by one with delay between them


#1

Hello,
I want to show some elements on a button click, but each element should appear with .5s delay from another.

<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>

Normally with jQuery I’d do something like this:

$(".elem").each(function(index){
  $(this).delay(500*index).fadeIn(1000);
});

How can i do this in Ionic 3/Angular 4 ? Thanks for your time!


#2

I recommend you to read angular animations docs.

https://angular.io/guide/animations

With Angular animations you can define two states with their own styles and then angular made the transition.

You can add a fadein animation on each new elemen of a list.

Check it out :wink: :wink:


#3

oh, I see that they have delay too - I knew about angular animations but my problem was that I didn’t know how to add different delay for each element.


#4

All the thing you can imagine you can do it with angular animations, just be creative.

You can define two states, then between that two steps you can define keyframes (like adding steps between father steps) and add to each transition an animation and they are set on a element by class so you can add a diferent delay on each element.

Just try and play with animations :wink: :blush: