Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/lib/tabs/tab-body.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div class="mat-tab-body-content" #content
[@translateTab]="_canBeAnimated ? _position : null"
[@translateTab]="_position"
(@translateTab.start)="_onTranslateTabStarted($event)"
(@translateTab.done)="_onTranslateTabComplete($event)">
<ng-template cdkPortalHost></ng-template>
Expand Down
13 changes: 0 additions & 13 deletions src/lib/tabs/tab-body.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -170,19 +170,6 @@ describe('MdTabBody', () => {
}));
});

it('should toggle the canBeAnimated flag', () => {
let fixture: ComponentFixture<SimpleTabBodyApp>;
let tabBody: MdTabBody;

fixture = TestBed.createComponent(SimpleTabBodyApp);
tabBody = fixture.componentInstance.mdTabBody;

expect(tabBody._canBeAnimated).toBe(false);

fixture.detectChanges();

expect(tabBody._canBeAnimated).toBe(true);
});
});


Expand Down
33 changes: 2 additions & 31 deletions src/lib/tabs/tab-body.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,7 @@ import {
OnInit,
ElementRef,
Optional,
ChangeDetectorRef,
AfterViewChecked,
AfterContentChecked,
} from '@angular/core';
import {
trigger,
Expand Down Expand Up @@ -75,7 +73,7 @@ export type MdTabBodyOriginState = 'left' | 'right';
])
]
})
export class MdTabBody implements OnInit, AfterViewChecked, AfterContentChecked {
export class MdTabBody implements OnInit, AfterViewChecked {
/** The portal host inside of this container into which the tab body content will be loaded. */
@ViewChild(PortalHostDirective) _portalHost: PortalHostDirective;

Expand All @@ -102,9 +100,6 @@ export class MdTabBody implements OnInit, AfterViewChecked, AfterContentChecked
}
}

/** Whether the element is allowed to be animated. */
_canBeAnimated: boolean = false;

/** The origin position from which this tab should appear when it is centered into view. */
_origin: MdTabBodyOriginState;

Expand All @@ -120,10 +115,7 @@ export class MdTabBody implements OnInit, AfterViewChecked, AfterContentChecked
}
}

constructor(
@Optional() private _dir: Dir,
private _elementRef: ElementRef,
private _changeDetectorRef: ChangeDetectorRef) { }
constructor(@Optional() private _dir: Dir, private _elementRef: ElementRef) { }

/**
* After initialized, check if the content is centered and has an origin. If so, set the
Expand All @@ -145,27 +137,6 @@ export class MdTabBody implements OnInit, AfterViewChecked, AfterContentChecked
}
}

/**
* After the content has been checked, determines whether the element should be allowed to
* animate. This has to be limited, because under a specific set of circumstances (see #2151),
* the animations can be triggered too early, which either crashes Chrome by putting it into an
* infinite loop (with Angular < 2.3.0) or throws an error because the element doesn't have a
* computed style (with Angular > 2.3.0). This can alternatively be determined by checking the
* transform: canBeAnimated = getComputedStyle(element) !== '', however document.contains should
* be faster since it doesn't cause a reflow.
*/
ngAfterContentChecked() {
// TODO: This can safely be removed after we stop supporting Angular < 2.4.2. The fix landed via
// https://github.com/angular/angular/commit/21030e9a1cf30e8101399d8535ed72d847a23ba6
if (!this._canBeAnimated) {
this._canBeAnimated = document.body.contains(this._elementRef.nativeElement);

if (this._canBeAnimated) {
this._changeDetectorRef.markForCheck();
}
}
}

_onTranslateTabStarted(e: AnimationEvent) {
if (this._isCenterPosition(e.toState)) {
this.onCentering.emit(this._elementRef.nativeElement.clientHeight);
Expand Down