diff --git a/src/material-experimental/mdc-chips/chip.ts b/src/material-experimental/mdc-chips/chip.ts index 4c5c73aa4f25..b2168726c8e2 100644 --- a/src/material-experimental/mdc-chips/chip.ts +++ b/src/material-experimental/mdc-chips/chip.ts @@ -405,7 +405,7 @@ export class MatChip extends _MatChipMixinBase implements AfterContentInit, Afte /** Whether or not the ripple should be disabled. */ _isRippleDisabled(): boolean { - return this.disabled || this.disableRipple || this._isBasicChip; + return this.disabled || this.disableRipple || this._animationsDisabled || this._isBasicChip; } static ngAcceptInputType_disabled: BooleanInput; diff --git a/src/material-experimental/mdc-chips/chips.scss b/src/material-experimental/mdc-chips/chips.scss index b753c3bbf80f..04bf7498a676 100644 --- a/src/material-experimental/mdc-chips/chips.scss +++ b/src/material-experimental/mdc-chips/chips.scss @@ -19,6 +19,10 @@ // Disables the chip enter animation. animation: none; + + .mdc-chip__checkmark-svg { + transition: none; + } } @include cdk-high-contrast(active, off) { @@ -57,6 +61,10 @@ pointer-events: none; opacity: 0; border-radius: inherit; + + ._mat-animation-noopable & { + transition: none; + } } } @@ -93,6 +101,10 @@ input.mat-mdc-chip-input { } .mdc-chip__checkmark-path { + ._mat-animation-noopable & { + transition: none; + } + @include cdk-high-contrast(black-on-white, off) { // SVG colors won't be changed in high contrast mode and since the checkmark is white // by default, it'll blend in with the background in black-on-white mode. Override the color