angular / angular/components

feat(): Provide a single mechanism to disable animation for a specific component at any time

Aperta
#20,781 7 commenti 2 reazioni 0 assegnatari Vedi su GitHub
animation area: many feature needs: discussion P3
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

Descrizione

#### Feature Description

Currently, animations are enabled once the animation module is loaded.

To disable animation one can add the `NoopAnimationsModule` module and animations are disabled.

This is fine globally, but in some scenarios we would like to disable an animation for a specific component at a specific scenario, not at all scenarios.

One possible solution is to use `[@.disable]` which will disable all angular animations, however, some components are using CSS animations which the above does not help to solve.

It is also possible to disable CSS animations through CSS however due to the `ViewEncapsulation` it is not always possible.

This becomes even more of a problem for library authors which have no control over `NoopAnimationsModule`...

Since there is no unified approach, it is confusing and sometimes hard to accomplish.

A good example is using Virtual Scroll with MatCheckbox.
The checkbox has a transition on an internal element `.mat-checkbox-background` which will cause flicker on virtual scroll since on render data changes the checkbox switch's context and might go through the states CHECKED/UNCHECKED/CHECKED in a second... with animation this will cause flicker!

Since we expect Virtual Scroll to enter into the table, select and other components we need this one solved.
Provide a brief summary of the feature you would like to see.

This topic continue #4227 which is locked now...

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

The issue names no files, tests, or entry points. Start by comparing the existing NoopAnimationsModule, [@.disable], and CSS-animation approaches described here, including the MatCheckbox and Virtual Scroll scenario. Done means providing one mechanism that disables animation for a specific component and scenario, including CSS animations.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
angular, typescript
Ambito
frontend
Tipo di issue
Funzionalità
Difficoltà
5/5
Tempo stimato
Più di una settimana
Stato di attività
Ferma
Chiarezza
Da chiarire
Idoneità per principianti
30/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.