CODEWITHSUNDEEP
cssangularanimationionic3animate.css
Joan
Joan

Reputation: 243

animation.css delay the ion-items from ion-list

I am trying to create an effect from a list of elements with Ionic. I am using the library animate.css and I would like to do a delay between the elements which form the list. In this example it shows what exactly I would like to do.

The problem is that I don't know how to do it on css to set a dinamicly delay for each item.

Here is my code: 

<ion-content padding>
 <ion-card>
  <ion-card-header>
   <ion-card-title>Rooms Avaliables</ion-card-title>
  </ion-card-header>
 <ion-list>
  <ion-item class="animated fadeInLeft" *ngFor="let room of rooms">
    {{room |json}}
  </ion-item>
 </ion-list>
</ion-card>
</ion-content>

But what I get, obviously, are all the items fadeIn left at the same time.

Thank you a lot, any suggestion would be appreciated it.

Upvotes: 0

Views: 1881

Answers (3)

monkey
monkey

Reputation: 1597

You can do it using a fiddle in the ts file. Implement a short delay like this when you assign the items you put into the list:

TS:

for (let i = 0; i < that.deviceArray.length; i++) {
        setTimeout(function() {
            that.animateItems.push(that.deviceArray[i]);
        }, 200 * i);

HTML:

        <ion-list no-margin>
            <ion-item  *ngFor="let item of animateItems; let i = index;" 
            [ngClass]="ZoomAnimationClass" 
            (click)="goToDevice(i)">
            ... put your stuff in here...
            </ion-item>
        </ion-list>

Then in scss, use something like this:

.zoomyInAnimation {
    //color:#808080;
    -webkit-animation: zoomIn 500ms;
    -moz-animation: zoomIn 500ms;
    -o-animation: zoomIn 500ms;
    animation: zoomIn 500ms; 
}

then for bonus points, you can do this programmatically in the TS :

this.ZoomAnimationClass = { 'zoomyInAnimation': true };

I've tried this and it works. But apologies if the code is less than perfect!

Upvotes: 1

Daniel Sixl
Daniel Sixl

Reputation: 2499

Sorry, I don't know much about Angular. A quick solution would be to a add the delay via JS or jQuery to your list items.

First I gave your list items a class of .room-item. Then I use .each() in jQuery to give them staggered delays:

let items = $(".room-item");
let time = 500; 
let timeUnit = 'ms';  

 items.each(function(index){
     $(this).css({
          'animation-delay' : (1+index) * time + timeUnit
     });
 });

Here is a working demo with a ngFor-List:

https://plnkr.co/edit/40pjd9t8rVTMG2k9XZnz?p=preview

I added the script in app/app.component.ts:

 ngAfterViewInit() {

    let items = $(".room-item");
    let time = 500; 
    let timeUnit = `ms`;  

     items.each(function(index){
         $(this).css({
              'animation-delay' : (1+index) * time + timeUnit
         });
     });

}

Upvotes: 0

Daniel Sixl
Daniel Sixl

Reputation: 2499

If you use SASS, you could use an iterator to add delay to your elements:

@for $i from 1 through 10 {
    &:nth-child(#{$i}) { 
        @include transition-delay(0.05s * $i); 
    }
}

Upvotes: 0

Related Questions