purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-10 04:25:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

(Sidebar) Don't enable the animations right away to prevent initial animations

Browse Source
This commit is contained in:
Sercan Yemen 2018-06-10 19:32:01 +03:00
parent b46f81b6ac
commit acbed8e305
2 changed files with 60 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/@fuse/components/sidebar/sidebar.component.scss
View File

@ -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 {

68
src/@fuse/components/sidebar/sidebar.component.ts
View File

@ -52,6 +52,9 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
private _player: AnimationPlayer;
private _unsubscribeAll: Subject<any>;
@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;
}