angular / angular/components

virtual-scroll doesn't work well with animate.leave

Ouverte
#32,943 4 commentaires 2 réactions 0 personnes assignées Voir sur GitHub
area: cdk/scrolling gemini-triaged
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
91

Description

### Which @angular/* package(s) are the source of the bug?

virtual-scroll

### Is this a regression?

No

### Description

1. With a default `cdkVirtualForTemplateCacheSize` set to `20` virtuall-scroll keeps `leave` class on a template and uses this template for next row generation; in that case, new rows turn out to be `hidden`.
2. With a `cdkVirtualForTemplateCacheSize` set to `0` to disable cache virtuall-scroll do not remove rows while slow/normal scroll speed, and only removes on a high speed scrolling.

### Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/stackblitz-starters-n4xn2i7p?file=src%2Fmain.ts

### Please provide the exception or error you saw

```true

```

### Please provide the environment you discovered this bug in (run `ng version`)

```true
Angular CLI : 21.2.2
Angular : 21.2.4
Node.js : 22.22.0
Package Manager : npm 10.8.2
Operating System : linux x64

┌───────────────────────────┬───────────────────┬───────────────────┐
│ Package │ Installed Version │ Requested Version │
├───────────────────────────┼───────────────────┼───────────────────┤
│ @angular/animations │ 21.2.4 │ ^21.2.4 │
│ @angular/build │ 21.2.2 │ ^21.2.2 │
│ @angular/cli │ 21.2.2 │ ^21.2.2 │
│ @angular/common │ 21.2.4 │ ^21.2.4 │
│ @angular/compiler │ 21.2.4 │ ^21.2.4 │
│ @angular/compiler-cli │ 21.2.4 │ ^21.2.4 │
│ @angular/core │ 21.2.4 │ ^21.2.4 │
│ @angular/forms │ 21.2.4 │ ^21.2.4 │
│ @angular/material │ 21.2.2 │ ^21.2.2 │
│ @angular/platform-browser │ 21.2.4 │ ^21.2.4 │
│ @angular/router │ 21.2.4 │ ^21.2.4 │
│ rxjs │ 7.8.2 │ ^7.8.1 │
│ typescript │ 5.9.3 │ ^5.9.3 │
│ zone.js │ 0.16.0 │ ^0.16.0 │
└───────────────────────────┴───────────────────┴───────────────────┘
```

### Anything else?

_No response_

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par la reproduction StackBlitz liée dans src/main.ts et reproduisez les deux paramètres de cdkVirtualForTemplateCacheSize pendant le défilement. Suivez le point d’entrée du défilement virtuel et le comportement de l’animation ; le travail est terminé lorsque les lignes mises en cache ne conservent plus la classe leave et ne deviennent plus masquées, et que les lignes non mises en cache sont supprimées lors des défilements lents et normaux ainsi que lors des défilements rapides.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
frontend
Type d'issue
Bug
Difficulté
4/5
Temps estimé
3-5 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
35/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.