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

#### 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...

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.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.