diff --git a/goldens/material/core/index.api.md b/goldens/material/core/index.api.md index 45dace77c856..1d16f9ab5ec9 100644 --- a/goldens/material/core/index.api.md +++ b/goldens/material/core/index.api.md @@ -53,7 +53,7 @@ export class AnimationDurations { // @public export interface AnimationsConfig { - animationsDisabled: boolean; + animationsDisabled?: boolean; } // @public diff --git a/src/material/core/animation/BUILD.bazel b/src/material/core/animation/BUILD.bazel index 0d95cde284ac..dbb79b2e7030 100644 --- a/src/material/core/animation/BUILD.bazel +++ b/src/material/core/animation/BUILD.bazel @@ -7,5 +7,6 @@ ng_project( srcs = ["animation.ts"], deps = [ "//:node_modules/@angular/core", + "//src/cdk/layout", ], ) diff --git a/src/material/core/animation/animation.ts b/src/material/core/animation/animation.ts index 315fbfe97ef6..c228579047ab 100644 --- a/src/material/core/animation/animation.ts +++ b/src/material/core/animation/animation.ts @@ -6,12 +6,13 @@ * found in the LICENSE file at https://angular.dev/license */ +import {MediaMatcher} from '@angular/cdk/layout'; import {ANIMATION_MODULE_TYPE, inject, InjectionToken} from '@angular/core'; /** Object used to configure the animation in Angular Material. */ export interface AnimationsConfig { /** Whether all animations should be disabled. */ - animationsDisabled: boolean; + animationsDisabled?: boolean; } /** Injection token used to configure the animations in Angular Material. */ @@ -45,11 +46,13 @@ export class AnimationDurations { * @docs-private */ export function _animationsDisabled(): boolean { - const customToken = inject(MATERIAL_ANIMATIONS, {optional: true}); - - if (customToken) { - return customToken.animationsDisabled; + if ( + inject(MATERIAL_ANIMATIONS, {optional: true})?.animationsDisabled || + inject(ANIMATION_MODULE_TYPE, {optional: true}) === 'NoopAnimations' + ) { + return true; } - return inject(ANIMATION_MODULE_TYPE, {optional: true}) === 'NoopAnimations'; + const mediaMatcher = inject(MediaMatcher); + return mediaMatcher.matchMedia('(prefers-reduced-motion)').matches; }