Open andrei-ilyukovich opened 5 years ago
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.
@JarekToro you use animation states different from :enter/:leave
, right? Probably you could share some simple working example, that might help to clarify things.
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))])
])
]
is there any known workaround for this issue?
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