CODEWITHSUNDEEP
javascriptangularanimationangular-animations
amiceli
amiceli

Reputation: 445

Transition delay angular 4 with ngFor

I'm trying to make a transition with delay for each item in a ngFor.

Each item must be animated a few ms after previous item.

This is my component code : 

@Component({
    selector: 'bookmark-list',
    templateUrl: './bookmark.list.component.html',
    providers: [BookmarkService],
    styleUrls: ['./bookmark.list.component.less'],
    animations: [
        trigger('myAwesomeAnimation', [
            transition(':enter', [
                style({transform: 'scale(0.8)',}),
                animate('1.5s ease-out', style({transform: 'scale(1)',})),
            ]),
        ])
    ]
})

And its html markup: 

<div class="col-sm-6 col-md-4 col-lg-3" *ngFor="let bookmark of bookmarks | bookmarkPipe:search">
  <div [@myAwesomeAnimation]='"large"'>
    <bookmark-item [bookmark]="bookmark"></bookmark-item>
  </div>
</div>

There is a way to pass delay as an argument to angular transition ?

EDIT

According to Oluwafemi Sule answer, stagger was the solution : 

    transition('* => *', [
        query(':leave', [
          stagger(
            100, [
              animate('0s ease-in-out', style({
                transform: 'scale(0.8)'
              }))
            ]
          )
        ], {optional: true}),
        query(':enter', [
          style({
            transform: 'scale(0.8)',
          }),
          stagger(100, [
            animate('0.5s 0.7s ease-in-out', style({
              transform: 'scale(1)',
            }))
          ])
        ], {optional: true})
      ])

Transition must be improved but it do the job.

And HTML markup : 

<section class="row" [@myAwesomeAnimation]='bookmarks.length'>
    <div class="col-sm-6 col-md-4 col-lg-3" *ngFor="let bookmark of bookmarks | bookmarkPipe:search">
      <bookmark-item [bookmark]="bookmark"></bookmark-item>
    </div>
  </section>

Upvotes: 2

Views: 18945

Answers (1)

Oluwafemi Sule
Oluwafemi Sule

Reputation: 38922

You can pass delay after the duration.

animate('1.5s delay ease-out', style({transform: 'scale(1)',})),

You'll need to compute delay for each item in the list for a smooth transition.

In order achieve a delay for each item, you will need to upgrade to an Angular version in releases 4.2.0–4.3.2 to use the experimental stagger animation function.

trigger('myAwesomeAnimation', [
  transition(':enter', [
    query(':leave', [
      style({transform: 'scale(0.8)',}),
      stagger(100, [
        animate('1.5s ease-out', style({transform: 'scale(1)',})),
      ])
    ]),
    ...
  ]),
])

Reference:

Upvotes: 10

Related Questions