How to handle animations and transations when using NGXS in Angular 8?

Question

I am using NGXS store for the first time to manage the state of an app. All is going fairly well but I came across a problem that I have not been able to overcome and it concerns transitions/animations. I have a list of items and those items can be in a selected state which make them expand and show additional information. Before I plug in this functionality to the store (it was being dealt directly in the component) I was using standard css transitions on max-heigth to animate the expansion but as soon as I connected the functionality to the store (started dispatching actions) the transitions stopped working. I can see that each time the store is updated the dom elements are removed and readded to the dom and that makes the use of standard css unfeasible. So I moved on and tried to use angular's animations with trigger that use different states to make the transitions but I only got the expansion to work and not the contraction and if I have an item selected(expanded) and then add another the selected item repeats the animation and that is not desirable. Here's the relevant code:

animations: [
    trigger('xis', [
      state(
        'expanded',
        style({
          maxHeight: '100px',
        }),
      ),
      state(
        'closed',
        style({
          backgroundColor: 'green',
          maxHeight: '0',
        }),
      ),
      transition('* => expanded', [animate('300ms')]), // This represent what I already tried
      transition('* => closed', [animate('300ms')]),   // And not that I use all of these
      transition('* => *', [animate('300ms')]),
      transition(':enter', [animate('300ms')]),
      transition(':leave', [animate('300ms')]),
    ]),
  ],
})

<div
    items
    class="item"
    [ngClass]="{ selected: isSelected(hp) | async }"
    *ngFor="let hp of reportItem$ | async"
    (click)="selectItem(hp.getId())"
  >
    <div class="item-header">...</div>
    <div
      class="complementary-info"
      [@xis]="(isSelected(hp) | async) ? 'expanded' : 'closed'"
    >
      ...
    </div>
</div>

I wonder if anyone came across this problem and found a way to solve it or if anyone can point me to what I am doing wrong

Answer 1

I ended up solving the problem by avoiding the re-render of the list when the state was updated. We can provide a 'track function' as documented here to the *ngFor that will assure that the list only re-renders when there are actual changes thus making possible to use standard transitions and dropping angular animations.