Skip to content

Commit 96fc6b5

Browse files
committed
fix(checkbox): fix checkbox animation when moved between view containers
1 parent de1ab06 commit 96fc6b5

File tree

2 files changed

+26
-0
lines changed

2 files changed

+26
-0
lines changed

src/lib/checkbox/checkbox.spec.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -220,6 +220,8 @@ describe('MatCheckbox', () => {
220220

221221
expect(checkboxInstance.checked).toBe(false);
222222
expect(checkboxInstance.indeterminate).toBe(false);
223+
224+
flush();
223225
}));
224226

225227
it('should add and remove disabled state', () => {
@@ -539,6 +541,19 @@ describe('MatCheckbox', () => {
539541
it('should not initially have any transition classes', () => {
540542
expect(checkboxNativeElement).not.toMatch(/^mat\-checkbox\-anim/g);
541543
});
544+
545+
it('should not have transition classes when animation ends', fakeAsync(() => {
546+
testComponent.isIndeterminate = true;
547+
fixture.detectChanges();
548+
549+
expect(checkboxNativeElement.classList)
550+
.toContain('mat-checkbox-anim-unchecked-indeterminate');
551+
552+
flush();
553+
554+
expect(checkboxNativeElement.classList)
555+
.not.toContain('mat-checkbox-anim-unchecked-indeterminate');
556+
}));
542557
});
543558

544559
describe(`when MAT_CHECKBOX_CLICK_ACTION is 'check'`, () => {

src/lib/checkbox/checkbox.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import {
1919
forwardRef,
2020
Inject,
2121
Input,
22+
NgZone,
2223
OnDestroy,
2324
Optional,
2425
Output,
@@ -182,6 +183,7 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
182183
constructor(elementRef: ElementRef,
183184
private _changeDetectorRef: ChangeDetectorRef,
184185
private _focusMonitor: FocusMonitor,
186+
private _ngZone: NgZone,
185187
@Attribute('tabindex') tabIndex: string,
186188
@Optional() @Inject(MAT_CHECKBOX_CLICK_ACTION)
187189
private _clickAction: MatCheckboxClickAction) {
@@ -291,6 +293,15 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
291293

292294
if (this._currentAnimationClass.length > 0) {
293295
element.classList.add(this._currentAnimationClass);
296+
297+
// Remove the animation class to avoid animation when the checkbox is moved between containers
298+
const animationClass = this._currentAnimationClass;
299+
300+
this._ngZone.runOutsideAngular(() => {
301+
setTimeout(() => {
302+
element.classList.remove(animationClass);
303+
}, 1000);
304+
});
294305
}
295306
}
296307

0 commit comments

Comments
 (0)