CODEWITHSUNDEEP
angularangular-animations
Kevin Py
Kevin Py

Reputation: 2468

Angular 5 animations on list with delay

I want to add a rotation animation to a list of images, but I can't do it. I can do a global rotation, but I would like to offset these animations with a delay. The trigger listmake the good animation, but only on start. The list is updated when the component data is updated.

Thank you.

component.ts

@Component({
  selector: 'app-totem',
  templateUrl: './totem.component.html',
  styleUrls: ['./totem.component.scss'],
  animations: [
    trigger('totem', [
      transition('* => *', [
        query(':self',
          stagger('70ms', [
            style({ transform: 'rotateY(-180deg)' }),
            animate('800ms ease-in-out')
          ])
        )
      ])
    ]),
    trigger('list', [
      transition('* => *', [
        query('.totem',
          stagger('70ms', [
            style({ transform: 'rotateY(-180deg)' }),
            animate('800ms ease-in-out')
          ])
        )
      ])
    ])
  ]
})

Component.html

<div class="totems" #totems [@list]="items.length">
  <div class="totem" *ngFor=" let item of items" @totem>
    <div class="front" [style.background-image]="'url(' + item.front.url + ')'"></div>
    <div class="back" [style.background-image]="'url(' + item.back.url + ')'"></div>
  </div>
</div>

Upvotes: 1

Views: 8493

Answers (1)

Zuriel
Zuriel

Reputation: 1858

you are close. you are correct when you create a trigger @totem

but your animation should be

trigger('totem', [
  transition(':enter', [
    query('*', [
      style({ transform: 'rotateY(-180deg)' }),
      stagger(70, [
        animate('800ms ease-in-out', style('*'))
      ]), { delay: 200 }
    ])
])

as seen in YearofMoo New Wave of Animation Features

they have a section devoted to ngFor. the KEY point is :enter is what the ngFor wants that way when the ngFor renders, it does the animation, and if you filter the ngFor it will always hit that ":enter" state with new items. (you can also do a :leave animation as well).

Also if you want to put a delay, its , { delay: 200 } after your animate line

Upvotes: 2

Related Questions