Transition delay angular 4 with ngFor
14,862
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:
- https://angular.io/guide/animations#delay
- https://angular.io/api/animations/stagger
- https://github.com/matsko/ng4-animations-preview
Related videos on Youtube
Comments
-
amiceli almost 2 years
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>
-
raulchopi about 6 yearsstagger() can only be used inside of query()