Angular animation doesn't work for items in virtual scroll list

[andrei-ilyukovich]

Reproduction

https://stackblitz.com/edit/virtual-scroll-animation

The same animation is being applied for items in usual list and list with virtual scroll applied.
It is working only for the first list.

Expected Behavior

Angular animation should work for items inside list with virtual scroll applied

Actual Behavior

Animation doesn't work at all

Environment

@angular/animations 8.0.0
@angular/cd k8.0.0
@angular/common 8.0.0
@angular/compile r8.0.0
@angular/core 8.0.0
@angular/forms 8.0.0
@angular/material 8.0.0
@angular/platform-browser 8.0.0
@angular/platform-browser-dynamic 8.0.0

[JarekToro]

Just to get this conversation going on this.

While not the entire solution, from the project I am working on setting templateCacheSize: 0 allowed animations to start working.

However with the example you provided, I was not able to remedy it with setting the cache to 0. In my project there are more variables at play - we are using drag and drop in the virtual list for example- and this might account for some differences.

However my reasoning on this is that the :enter animation will never fire because the component is reused and never "leaves" so the:enter animation hook is not fired.

[andrei-ilyukovich]

@JarekToro you use animation states different from :enter/:leave, right? Probably you could share some simple working example, that might help to clarify things.

[JarekToro]

No, The states :enter/:leave are in fact used
This is heavily modified. And not tested to work but this generally what is being done.
Also Note. That animations are not perfect they are a little janky sometimes but they do fire the majority of the time.

The Template

  <cdk-virtual-scroll-viewport
      [itemSize]="100"
      minBufferPx="1000"
      maxBufferPx="1000"
    >
      <div
        cdkDropList
        [cdkDropListData]="items | async"
      >
        <app-component
            class="query_selector"
          *cdkVirtualFor="
            let item of items | async;
            trackBy: trackByFunction;
            templateCacheSize: 0
          "
          @AnimationName
          [cdkDragData]="item"
          cdkDrag
        >
      
      </div>
    </cdk-virtual-scroll-viewport>

The Animation

 animations: [
    trigger('AnimationName', [
      transition(':enter', [query('.query_selector', useAnimation(animation))]),
      transition(':leave', [query('.query_selector', useAnimation(animation))])
    ])
  ]

[capc0]

is there any known workaround for this issue?