diff --git a/src/lib/checkbox/checkbox.spec.ts b/src/lib/checkbox/checkbox.spec.ts index 141aacf3f659..1feb23bd106e 100644 --- a/src/lib/checkbox/checkbox.spec.ts +++ b/src/lib/checkbox/checkbox.spec.ts @@ -220,6 +220,8 @@ describe('MatCheckbox', () => { expect(checkboxInstance.checked).toBe(false); expect(checkboxInstance.indeterminate).toBe(false); + + flush(); })); it('should add and remove disabled state', () => { @@ -539,6 +541,19 @@ describe('MatCheckbox', () => { it('should not initially have any transition classes', () => { expect(checkboxNativeElement).not.toMatch(/^mat\-checkbox\-anim/g); }); + + it('should not have transition classes when animation ends', fakeAsync(() => { + testComponent.isIndeterminate = true; + fixture.detectChanges(); + + expect(checkboxNativeElement.classList) + .toContain('mat-checkbox-anim-unchecked-indeterminate'); + + flush(); + + expect(checkboxNativeElement.classList) + .not.toContain('mat-checkbox-anim-unchecked-indeterminate'); + })); }); describe(`when MAT_CHECKBOX_CLICK_ACTION is 'check'`, () => { diff --git a/src/lib/checkbox/checkbox.ts b/src/lib/checkbox/checkbox.ts index 47df4e44063b..b4c80bc58cc1 100644 --- a/src/lib/checkbox/checkbox.ts +++ b/src/lib/checkbox/checkbox.ts @@ -19,6 +19,7 @@ import { forwardRef, Inject, Input, + NgZone, OnDestroy, Optional, Output, @@ -182,6 +183,7 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc constructor(elementRef: ElementRef, private _changeDetectorRef: ChangeDetectorRef, private _focusMonitor: FocusMonitor, + private _ngZone: NgZone, @Attribute('tabindex') tabIndex: string, @Optional() @Inject(MAT_CHECKBOX_CLICK_ACTION) private _clickAction: MatCheckboxClickAction) { @@ -291,6 +293,15 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc if (this._currentAnimationClass.length > 0) { element.classList.add(this._currentAnimationClass); + + // Remove the animation class to avoid animation when the checkbox is moved between containers + const animationClass = this._currentAnimationClass; + + this._ngZone.runOutsideAngular(() => { + setTimeout(() => { + element.classList.remove(animationClass); + }, 1000); + }); } }