fix(checkbox): fix checkbox animation when moved between view containers

Author: tinayuangao

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'`, () => {

src/lib/checkbox/checkbox.ts

@@ -291,6 +291,12 @@ 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;
+      setTimeout(() => {
+        element.classList.remove(animationClass);
+      }, 1000);
     }
   }