diff --git a/src/@fuse/components/sidebar/sidebar.component.scss b/src/@fuse/components/sidebar/sidebar.component.scss index 66a6b2cc..9a3c1005 100644 --- a/src/@fuse/components/sidebar/sidebar.component.scss +++ b/src/@fuse/components/sidebar/sidebar.component.scss @@ -11,9 +11,6 @@ fuse-sidebar { min-width: 280px; max-width: 280px; z-index: 1000; - transition-property: transform, width, min-width, max-width; - transition-duration: 150ms; - transition-timing-function: ease-in-out; box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.35); background: white; @@ -47,6 +44,12 @@ fuse-sidebar { max-width: 64px; } } + + &.animations-enabled { + transition-property: transform, width, min-width, max-width; + transition-duration: 150ms; + transition-timing-function: ease-in-out; + } } .fuse-sidebar-overlay { diff --git a/src/@fuse/components/sidebar/sidebar.component.ts b/src/@fuse/components/sidebar/sidebar.component.ts index e698a9e2..dcd5aad9 100644 --- a/src/@fuse/components/sidebar/sidebar.component.ts +++ b/src/@fuse/components/sidebar/sidebar.component.ts @@ -52,6 +52,9 @@ export class FuseSidebarComponent implements OnInit, OnDestroy private _player: AnimationPlayer; private _unsubscribeAll: Subject; + @HostBinding('class.animations-enabled') + private _animationsEnabled: boolean; + /** * Constructor * @@ -80,6 +83,7 @@ export class FuseSidebarComponent implements OnInit, OnDestroy this.invisibleOverlay = false; // Set the private defaults + this._animationsEnabled = false; this._unsubscribeAll = new Subject(); } @@ -197,6 +201,20 @@ export class FuseSidebarComponent implements OnInit, OnDestroy // @ Private methods // ----------------------------------------------------------------------------------------------------- + /** + * Setup the visibility of the sidebar + * + * @private + */ + private _setupVisibility(): void + { + // Remove the existing box-shadow + this._renderer.setStyle(this._elementRef.nativeElement, 'box-shadow', 'none'); + + // Make the sidebar invisible + this._renderer.setStyle(this._elementRef.nativeElement, 'visibility', 'hidden'); + } + /** * Setup the sidebar position * @@ -226,6 +244,7 @@ export class FuseSidebarComponent implements OnInit, OnDestroy // Return if the lockedOpen wasn't set if ( !this.lockedOpen ) { + // Return return; } @@ -292,20 +311,6 @@ export class FuseSidebarComponent implements OnInit, OnDestroy }); } - /** - * Setup the visibility of the sidebar - * - * @private - */ - private _setupVisibility(): void - { - // Remove the existing box-shadow - this._renderer.setStyle(this._elementRef.nativeElement, 'box-shadow', 'none'); - - // Make the sidebar invisible - this._renderer.setStyle(this._elementRef.nativeElement, 'visibility', 'hidden'); - } - /** * Show the backdrop * @@ -416,6 +421,23 @@ export class FuseSidebarComponent implements OnInit, OnDestroy }, delayAmount); } + /** + * Enable the animations + * + * @private + */ + private _enableAnimations(): void + { + // Return if animations already enabled + if ( this._animationsEnabled ) + { + return; + } + + // Enable the animations + this._animationsEnabled = true; + } + // ----------------------------------------------------------------------------------------------------- // @ Public methods // ----------------------------------------------------------------------------------------------------- @@ -430,6 +452,9 @@ export class FuseSidebarComponent implements OnInit, OnDestroy return; } + // Enable the animations + this._enableAnimations(); + // Show the sidebar this._showSidebar(); @@ -450,6 +475,9 @@ export class FuseSidebarComponent implements OnInit, OnDestroy return; } + // Enable the animations + this._enableAnimations(); + // Hide the backdrop this._hideBackdrop(); @@ -487,6 +515,9 @@ export class FuseSidebarComponent implements OnInit, OnDestroy return; } + // Enable the animations + this._enableAnimations(); + // Unfold the sidebar temporarily this.unfolded = true; } @@ -503,6 +534,9 @@ export class FuseSidebarComponent implements OnInit, OnDestroy return; } + // Enable the animations + this._enableAnimations(); + // Fold the sidebar back this.unfolded = false; } @@ -518,6 +552,9 @@ export class FuseSidebarComponent implements OnInit, OnDestroy return; } + // Enable the animations + this._enableAnimations(); + // Fold this.folded = true; } @@ -533,6 +570,9 @@ export class FuseSidebarComponent implements OnInit, OnDestroy return; } + // Enable the animations + this._enableAnimations(); + // Unfold this.folded = false; }