@@ -325,6 +325,9 @@ export class MdSidenavContainer implements AfterContentInit {
325
325
private _left : MdSidenav | null ;
326
326
private _right : MdSidenav | null ;
327
327
328
+ /** Inline styles to be applied to the container. */
329
+ _styles : { marginLeft : string ; marginRight : string ; transform : string ; } ;
330
+
328
331
constructor ( @Optional ( ) private _dir : Directionality , private _element : ElementRef ,
329
332
private _renderer : Renderer2 , private _ngZone : NgZone ,
330
333
private _changeDetectorRef : ChangeDetectorRef ) {
@@ -365,6 +368,7 @@ export class MdSidenavContainer implements AfterContentInit {
365
368
// Set the transition class on the container so that the animations occur. This should not
366
369
// be set initially because animations should only be triggered via a change in state.
367
370
this . _renderer . addClass ( this . _element . nativeElement , 'mat-sidenav-transition' ) ;
371
+ this . _updateStyles ( ) ;
368
372
this . _changeDetectorRef . markForCheck ( ) ;
369
373
} ) ;
370
374
@@ -459,40 +463,20 @@ export class MdSidenavContainer implements AfterContentInit {
459
463
return ( this . _isSidenavOpen ( sidenav ) && sidenav . mode == mode ) ? sidenav . _width : 0 ;
460
464
}
461
465
462
- _getMarginLeft ( ) {
463
- return this . _left ? this . _getSidenavEffectiveWidth ( this . _left , 'side' ) : 0 ;
464
- }
465
-
466
- _getMarginRight ( ) {
467
- return this . _right ? this . _getSidenavEffectiveWidth ( this . _right , 'side' ) : 0 ;
468
- }
469
-
470
- _getPositionLeft ( ) {
471
- return this . _left ? this . _getSidenavEffectiveWidth ( this . _left , 'push' ) : 0 ;
472
- }
473
-
474
- _getPositionRight ( ) {
475
- return this . _right ? this . _getSidenavEffectiveWidth ( this . _right , 'push' ) : 0 ;
476
- }
477
-
478
- /**
479
- * Returns the horizontal offset for the content area. There should never be a value for both
480
- * left and right, so by subtracting the right value from the left value, we should always get
481
- * the appropriate offset.
482
- */
483
- _getPositionOffset ( ) {
484
- return this . _getPositionLeft ( ) - this . _getPositionRight ( ) ;
485
- }
486
-
487
466
/**
488
- * This is using [ngStyle] rather than separate [style...] properties because [style.transform]
489
- * doesn't seem to work right now .
467
+ * Recalculates and updates the inline styles. Note that this
468
+ * should be used sparingly, because it causes a reflow .
490
469
*/
491
- _getStyles ( ) {
492
- return {
493
- marginLeft : `${ this . _getMarginLeft ( ) } px` ,
494
- marginRight : `${ this . _getMarginRight ( ) } px` ,
495
- transform : `translate3d(${ this . _getPositionOffset ( ) } px, 0, 0)`
470
+ private _updateStyles ( ) {
471
+ const marginLeft = this . _left ? this . _getSidenavEffectiveWidth ( this . _left , 'side' ) : 0 ;
472
+ const marginRight = this . _right ? this . _getSidenavEffectiveWidth ( this . _right , 'side' ) : 0 ;
473
+ const leftWidth = this . _left ? this . _getSidenavEffectiveWidth ( this . _left , 'push' ) : 0 ;
474
+ const rightWidth = this . _right ? this . _getSidenavEffectiveWidth ( this . _right , 'push' ) : 0 ;
475
+
476
+ this . _styles = {
477
+ marginLeft : `${ marginLeft } px` ,
478
+ marginRight : `${ marginRight } px` ,
479
+ transform : `translate3d(${ leftWidth - rightWidth } px, 0, 0)`
496
480
} ;
497
481
}
498
482
}
0 commit comments