CODEWITHSUNDEEP
angular
iPhoneJavaDev
iPhoneJavaDev

Reputation: 825

Stagger animation does not work when switching to list of the same length

I am trying to stagger the display of the list items. I have a navigation bar with 3 categories. For each category, I am listing each items with delay as below code. When I switch from 1st category (with 5 items) to 2nd category (with 3 items), the animation triggers. However when I switch from 1st category to 3rd category (with 5 items as well) and vice versa, animation is not being triggered.

<div [@catList]="items.length">
....

animations: [
  trigger('catList', [
    transition('* => *', [
      query(':enter', style({ opacity: 0 }), {optional: true}),
      query(':enter', stagger('200ms', [
        animate('1s ease-in', keyframes([
          style({opacity: 0, transform: 'translateY(-75%)', offset: 0}),
          style({opacity: .5, transform: 'translateY(35px)',  offset: 0.3}),
          style({opacity: 1, transform: 'translateY(0)',     offset: 1.0}),
        ]))]), {optional: true}),
    ])
  ]),
]

Upvotes: 0

Views: 609

Answers (1)

Trash Can
Trash Can

Reputation: 6814

It is because you are binding your animation trigger @catList to items.length, when the new length and the current length differ, as in your first case, from 3 to 5, angular sees that it has changed, so the animation is triggered. Basically angular just does a simple strict equality check using === to see if it needs to run the animation. if your items array is not mutable (You are not modifying it directly, rather you return a new array for each modification), then you can just use items directly in your binding like this [@catList]='items' because every time you return a new array, the reference changes, so angular's change detection will kick in and your animation is triggered

Upvotes: 3

Related Questions