Sidebar with Custom Animation in Angular Sidebar component

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