Merge pull request #8255 from IgniteUI/valadzhov/tab-nav-drawer-anima…

…tion-7157

feat(tab-nav-drawer, tabs): Disable animation. #7157

CHANGELOG.md

@@ -17,6 +17,10 @@ All notable changes for each version of this project will be documented in this
     - **Breaking Change** - Deprecated the `label` property.
 - `igxGridActions`
     - Added `asMenuItems` Input for grid actions - `igx-grid-editing-actions`, `igx-grid-pinning-actions`. When set to true will render the related action buttons as separate menu items with button and label.
+- `igxNavigationDrawer`
+    - Added `disableAnimation` property which enables/disables the animation, when toggling the drawer. Set to `false` by default.
+- `igxTabs`
+    - Added `disableAnimation` property which enables/disables the transition animation of the tabs' content. Set to `false` by default.
 - `IgxExpansionPanel`
     - `IExpansionPanelEventArgs.panel` - Deprecated. Usе `owner` property to get a reference to the panel. 
 

projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-component.scss

@@ -84,4 +84,8 @@
     @include e(item, header) {
         @extend %item--header !optional;
     }
+
+    @include m(disable-animation) {
+        @extend %disable-animation !optional;
+    }
 }

projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss

@@ -434,6 +434,10 @@
         transition: none;
         visibility: hidden;
     }
+
+    %disable-animation {
+        transition-duration: 0s;
+    }
 }
 
 /// Adds typography styles for the igx-navdrawer component.

projects/igniteui-angular/src/lib/navigation-drawer/README.md

@@ -64,6 +64,7 @@ The navigation drawer can either sit above content or be pinned alongside it and
 | `pinThreshold` | number | Minimum device width required for automatic pin to be toggled. Default is 1024, can be set to a falsy value to disable this behavior. |
 | `width` | string| Width of the drawer in its open state. Defaults to "280px".|
 | `miniWidth` | string | Width of the drawer in its mini variant. Defaults to "60px". |
+| `disableAnimation` | boolean | Enables/disables the animation, when toggling the drawer. Set to `false` by default.
 
 ### Outputs
 | Name      |  Description |

projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.html

@@ -10,6 +10,7 @@
 <div [hidden]="pin"
     class="igx-nav-drawer__overlay"
     [class.igx-nav-drawer__overlay--hidden]="!isOpen"
+    [class.igx-nav-drawer--disable-animation]="disableAnimation"
     (click)="close()" #overlay>
 </div>
 <aside role="navigation"
@@ -18,7 +19,8 @@
     [class.igx-nav-drawer__aside--mini]="miniTemplate && !isOpen"
     [class.igx-nav-drawer__aside--normal]="!miniTemplate || isOpen"
     [class.igx-nav-drawer__aside--pinned]="pin"
-    [class.igx-nav-drawer__aside--right]="position == 'right'" #aside>
+    [class.igx-nav-drawer__aside--right]="position == 'right'" #aside
+    [class.igx-nav-drawer--disable-animation]="disableAnimation">
 
     <ng-container *ngTemplateOutlet="template || defaultItemsTemplate"></ng-container>
 </aside>

projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.ts

@@ -204,6 +204,16 @@ export class IgxNavigationDrawerComponent implements
      */
     @Input() public width = '280px';
 
+
+    /**
+     * Enables/disables the animation, when toggling the drawer. Set to `false` by default.
+     * ````html
+     * <igx-nav-drawer [disableAnimation]="true"></igx-nav-drawer>
+     * ````
+     */
+    @HostBinding ('class.igx-nav-drawer--disable-animation')
+    @Input() public disableAnimation = false;
+
     /**
      * Width of the drawer in its mini state. Defaults to 68px.
      *

projects/igniteui-angular/src/lib/tabs/README.md

@@ -49,6 +49,7 @@ If the total visible items width exceeds the vew port width, scroll buttons are
 | `label` | string | Set the tab item text. |
 | `disabled` | boolean | 	Set if the tab is enabled/disabled.	 |
 | `type` | IgxTabsType | 	Set the tab item sizing mode. By default, `contentfit` is set, the tab item width is sized to its content in the range of min/max width. When the sizing type is `fixed` - all tabs have equal size to fit the view port. |
+| `disableAnimation`| boolean | Enables/disables the transition animation of the tabs' content. Set to `false` by default.
 
 ## Events
 

projects/igniteui-angular/src/lib/tabs/tabs.component.ts

@@ -245,6 +245,14 @@ export class IgxTabsComponent implements IgxTabsBase, AfterViewInit, OnDestroy {
      */
     public visibleItemsWidth: number;
 
+    /**
+     * Enables/disables the transition animation of the tabs' content. Set to `false` by default.
+     * ````html
+     * <igx-tabs [disableAnimation]="true"></igx-tabs>
+     */
+    @Input()
+    public disableAnimation = false;
+
     /**
      * @hidden
      */
@@ -462,13 +470,14 @@ export class IgxTabsComponent implements IgxTabsBase, AfterViewInit, OnDestroy {
         this.onTabItemSelected.emit({ tab: newTab, group: newTabRelatedGroup });
 
         requestAnimationFrame(() => {
+            const transitionDuration  =  this.disableAnimation ? 0 : 0.2;
             // bring the new selected tab into view if it is not
             this.bringNewTabIntoView(newTab);
             // animate the new selection indicator
             this.transformIndicatorAnimation(newTab.nativeTabItem.nativeElement);
             // animate the new tab's group content
             if (!this.hasContentTabs) {
-                this.transformContentAnimation(newTab, 0.2);
+                this.transformContentAnimation(newTab, transitionDuration);
             }
         });
     }