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

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 {

src/@fuse/components/sidebar/sidebar.component.ts

@@ -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;
     }