diff --git a/src/lib/badge/_badge-theme.scss b/src/lib/badge/_badge-theme.scss index 7b7dcd38e4b1..08ece619916b 100644 --- a/src/lib/badge/_badge-theme.scss +++ b/src/lib/badge/_badge-theme.scss @@ -163,6 +163,11 @@ $mat-badge-large-size: $mat-badge-default-size + 6; pointer-events: none; } + .ng-animate-disabled .mat-badge-content, + .mat-badge-content._mat-animation-noopable { + transition: none; + } + // The active class is added after the element is added // so it can animate scale to default .mat-badge-content.mat-badge-active { diff --git a/src/lib/badge/badge.ts b/src/lib/badge/badge.ts index e079402e41ef..6a396ccf344f 100644 --- a/src/lib/badge/badge.ts +++ b/src/lib/badge/badge.ts @@ -20,6 +20,7 @@ import { Renderer2, } from '@angular/core'; import {ThemePalette, mixinDisabled, CanDisableCtor, CanDisable} from '@angular/material/core'; +import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations'; let nextId = 0; @@ -128,9 +129,10 @@ export class MatBadge extends _MatBadgeMixinBase implements OnDestroy, CanDisabl private _elementRef: ElementRef, private _ariaDescriber: AriaDescriber, /** @breaking-change 8.0.0 Make _renderer a required param and remove _document. */ - private _renderer?: Renderer2) { - super(); - } + private _renderer?: Renderer2, + @Optional() @Inject(ANIMATION_MODULE_TYPE) private _animationMode?: string) { + super(); + } /** Whether the badge is above the host or not */ isAbove(): boolean { @@ -180,6 +182,10 @@ export class MatBadge extends _MatBadgeMixinBase implements OnDestroy, CanDisabl badgeElement.classList.add('mat-badge-content'); badgeElement.textContent = this.content; + if (this._animationMode === 'NoopAnimations') { + badgeElement.classList.add('_mat-animation-noopable'); + } + if (this.description) { badgeElement.setAttribute('aria-label', this.description); } @@ -187,7 +193,7 @@ export class MatBadge extends _MatBadgeMixinBase implements OnDestroy, CanDisabl this._elementRef.nativeElement.appendChild(badgeElement); // animate in after insertion - if (typeof requestAnimationFrame === 'function') { + if (typeof requestAnimationFrame === 'function' && this._animationMode !== 'NoopAnimations') { this._ngZone.runOutsideAngular(() => { requestAnimationFrame(() => { badgeElement.classList.add(activeClass); diff --git a/tools/public_api_guard/lib/badge.d.ts b/tools/public_api_guard/lib/badge.d.ts index 8f5f93e789e6..089d397a2797 100644 --- a/tools/public_api_guard/lib/badge.d.ts +++ b/tools/public_api_guard/lib/badge.d.ts @@ -11,7 +11,7 @@ export declare class MatBadge extends _MatBadgeMixinBase implements OnDestroy, C position: MatBadgePosition; size: MatBadgeSize; constructor(_document: any, _ngZone: NgZone, _elementRef: ElementRef, _ariaDescriber: AriaDescriber, - _renderer?: Renderer2 | undefined); + _renderer?: Renderer2 | undefined, _animationMode?: string | undefined); isAbove(): boolean; isAfter(): boolean; ngOnDestroy(): void;