Search results

Sidebar with Custom Animation in Angular Sidebar component

In the following example, the sidebar is rendered with custom animation effects. Click the buttons available in the main content area to check how the custom animations works with sidebar.

Sidebar will automatically adjust expanding animation to match any custom size specified in CSS styles.

Source
Preview
app.component.ts
app.module.ts
main.ts
app.component.html
app.component.css
import { Component, ViewChild } from '@angular/core';
import { SidebarComponent } from '@syncfusion/ej2-angular-navigations';

@Component({
    selector: 'app-root',
    styleUrls: ['app/app.component.css'],
    templateUrl: 'app/app.component.html'
})
export class AppComponent {
  @ViewChild('sidebar') sidebar: SidebarComponent;
  public showBackdrop: boolean = true;
  public closeOnDocumentClick: boolean = true;

  public onCreated(args: any) {
         this.sidebar.element.style.visibility = '';
    }
  // Close Button
  closeClick_btn(): void {
    this.sidebar.element.classList.remove("sidebar");
    this.sidebar.element.classList.remove("rotate");
    this.sidebar.element.classList.remove("w3-animate-zoom");
    this.sidebar.element.classList.remove("w3-animate-bottom");
    this.sidebar.element.classList.remove("rotate_3d");
    this.sidebar.element.classList.remove("reverse_slide_out");
    this.sidebar.hide();
  };
  // Zoom Effect
  zoom():void{
    this.sidebar.show();
    this.sidebar.element.classList.add("w3-animate-zoom");
  };
  // Open Door
  open_door():void{
    this.sidebar.show();
    let sidebar_element: Element =document.getElementsByClassName("e-sidebar-overlay")[0];
    sidebar_element.classList.add("move");
    document.getElementsByClassName("move")[0].style.transform ="rotateX(-20deg)";
  };
  // Bottom To Top
  bottom_top():void{
    this.sidebar.show();
    this.sidebar.element.classList.add("w3-animate-bottom");
  };
  // Rotate
  rotate():void{
    this.sidebar.show();
    this.sidebar.element.classList.add("rotate");
  };
  // Rotate 3D
  rotate_3d():void{
    this.sidebar.show();
    this.sidebar.element.classList.add("rotate_3d");
  };
  // Reverse Slide Out
  reverse():void{
    this.sidebar.show();
    this.sidebar.element.classList.add("reverse_slide_out");
  };
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { SidebarModule } from '@syncfusion/ej2-angular-navigations';
import { AppComponent } from './app.component'

@NgModule({
    imports: [SidebarModule, BrowserModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
<!--Sidebar element declaration -->
<ejs-sidebar id="sidebar-element" class="sidebar" #sidebar  [showBackdrop]="showBackdrop" [closeOnDocumentClick]="closeOnDocumentClick" (created)="onCreated($event)" style="visibility: hidden">
    <div class="title"> Sidebar content</div>
    <div class="sub-title">
        * Sidebar is rendered with animation effect
    </div>
    <div class="center-align">
        <button ejs-button id="close_btn" (click)="closeClick_btn()" class="e-btn close-btn">Close Sidebar</button>
    </div>
</ejs-sidebar>
<div>
    <div class="title">Sidebar Transitions</div>
    <div class="sub-title"> * Click the below button to render the Sidebar with animation effect.</div>
    <div style="padding:20px" class="center-align">
        <button ejs-button id="toggle" class="e-btn e-info" (click)="zoom()">Zoom Sidebar</button>
        <button ejs-button id="toggle" class="e-btn e-info" (click)="open_door()">Open Door</button>
        <button ejs-button id="toggle" class="e-btn e-info" (click)="bottom_top()">Bottom to Top</button>
    </div>
    <div style="padding:20px" class="center-align">
        <button ejs-button id="toggle" class="e-btn e-info" (click)="rotate()">Rotate Sidebar</button>
        <button ejs-button id="toggle" class="e-btn e-info" (click)="rotate_3d()">Rotate 3D</button>
        <button ejs-button id="toggle" class="e-btn e-info" (click)="reverse()">Reverse Slide Out</button>
    </div>
</div>
<!--end of main content declaration -->
/*Sidebar element styles*/
#sidebar-element {
	background-color: rgb(25, 118, 210);
    color: #ffffff;
}
.sidebar {
    animation-name:rotate_sidebar; 
    animation-duration: 2s
}
@keyframes rotate_sidebar{from{transform:rotateY(150deg)} to{transform:rotateY(360deg)}}
/*main content styles*/
.title {
	text-align: center;
	font-size: 25px;
    padding: 15px;
    font-style: italic;
}

.sub-title {
	text-align: center;
	font-size: 16px;
    padding: 10px;
    font-style: italic;
}

.center-align {
    text-align: center;
    padding-top: 20px;
}
/*Animation styles*/
#close,#close:hover,#close:active,#close:focus{ /* csslint allow: adjoining-classes*/
	background: #fafafa;
	color:black;
}
#close_btn,#close_btn:hover,#close_btn:active,#close_btn:focus{ /* csslint allow: adjoining-classes*/
	background: #fafafa;
	color:black;
}
.w3-animate-bottom {
    animation-name: animatebottom;
    animation-duration: 1s;
}
@keyframes animatebottom{from {
    margin-top: 100%;
  }
  to {
    margin-top: 0%;
  }}
  
  .w3-animate-zoom {animation-name:animatezoom; 
    animation-duration: 1s}
  @keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}

.rotate {
     animation-name:rotate1; 
    animation-duration: 1s
}
@keyframes rotate1{from{transform:rotateX(150deg)} to{transform:rotateX(360deg)}}
.rotate_3d {
    animation-name:rotate; 
   animation-duration: 1s
}
@keyframes rotate{from{transform:rotateY(150deg)} to{transform:rotateY(360deg)}}

  .reverse_slide_out  {
    
    animation-name: reverse1; 
    animation-duration: 1s
 }
 @keyframes reverse1  {from {
    transform: rotateY(-65deg);
    margin-left: 200px;
  }

  to {
    margin-left: 0%;
  }
}
/*End of animation styles*/
button {
    margin:5px;
}