CODEWITHSUNDEEP
angularanimation
Ghanshyam Singh
Ghanshyam Singh

Reputation: 1381

Delay enter transition animation in Angular 4.x

I have applied animation on <tr *ngFor='let something of Something' [@rowAnimate]> ...</tr>

Here is my code to animate rows

animations: [
    trigger("rowAnimate", [
        transition("void=>*", [
            animate("500ms ease-in-out", keyframes([
                style({ transform: 'translateX(+200%)'}),   
                style({ transform: 'translateX(+150%)'}),
                style({ transform: 'translateX(+100%)'}),
                style({ transform: 'translateX(+50%)'}),
                style({ transform: 'translateX(0%)'})
            ]))
        ]),
        transition("*=>void", [
            animate("2000ms ease-in-out", style({ left: 100, opacity: 0.0, }))
        ])

    ])
]

Its working but not same as i want . What i want is to delay each row animation by some time(i.e first row 1 animation start then row 2 and so on).

I don't want animation to run concurrently for each row

Upvotes: 1

Views: 2115

Answers (1)

Siddharth Kaushik
Siddharth Kaushik

Reputation: 316

Use query and stagger. Also put animation trigger on table, so you can select rows in your query:

trigger("slide", [
  transition("* => slideIn", [
    // First hide the rows
    query('.row ', style({ opacity: 0, transform: "translateY(-40px)" })),
    // Then slide in one by one using stagger. Here first timing parameter i.e. 100ms is the delay you seek
    query('.row', stagger('100ms',
      animate('500ms', keyframes([
        style({opacity: 0, transform: 'translateY(-40px)', offset: 0}),
        style({opacity: 0.25, transform: 'translateY(-25px)', offset: 0.25}),
        style({opacity: 0.5, transform: 'translateY(-5px)', offset: 0.5}),
        style({opacity: 0.75, transform: 'translateY(5px)', offset: 0.75}),
        style({opacity: 1, transform: 'translateY(0)', offset: 1.0})
      ]))
    ))
  ])
])

Use special selectors like :enter or :leave in your query if the rows are being added/removed dynamically. More special selectors in query page.

Upvotes: 2

Related Questions