How to improve animation performance sidenav angular material

Question

I made sidenav using angular -material md-sidenav and below is a screenshot. When I try to click the button for sidenav, the animations are quite lagging. I used the image on the top bar, and the rest is just text with font icons. What can I do badly, that is slow. Animations are even worse when I view them on mobile devices.

Sidenav screenshot:

Here is the sidenav code:

<md-sidenav class="boxme-sidenav" layout="column" hide-gt-sm class="md-sidenav-left md-whiteframe-z2" md-component-id="left"> <div layout="coloumn" style="z-index:1000;box-shadow:2px 0px 10px grey;"> <div flex class="sidenav-logo"> <img ng-src="{{mainLogo}}" alt=""> </div> </div> <md-list style="background-color:#00B0FF;color:white;z-index:10;"> <md-list-item class="md-2-line sidenav-list" layout-padding> <md-button href="" layout-align="space-around center"> <i class="fa fa-size fa-briefcase"></i> <span class="md-body-2">Dashboard</span> </md-button> </md-list-item> <md-list-item class="md-2-line sidenav-list" layout-padding layout-align="start center"> <md-button href=""> <i class="fa fa-size fa-user"></i> <span>My Stuff</span> </md-button> </md-list-item> <md-list-item class="md-2-line sidenav-list" layout-padding layout-align="start center"> <md-button href=""> <i class="fa fa-size fa-file-o"></i> <span>Order History</span> </md-button> </md-list-item> <md-list-item class="md-2-line sidenav-list" layout-padding layout-align="start center"> <md-button href=""> <i class="fa fa-size fa-credit-card"></i> <span>Billing</span> </md-button> </md-list-item> <md-divider></md-divider> <md-subheader style="background-color:#00B0FF;color:white;">Manage the items</md-subheader><!--You can use md-no-sticky class--> <md-list-item class="md-2-line sidenav-list" layout-padding layout-align="start center"> <md-button href=""><i class="fa fa-size fa-user"></i> Pickup my stuff</md-button> </md-list-item> <md-list-item class="md-2-line sidenav-list" layout-padding layout-align="start center"> <md-button href=""><i class="fa fa-size fa-user"></i> Deliver my stuff</md-button> </md-list-item> </md-list> </md-sidenav> 

Note:

After some time, the performance and animation of sidenav really lingers on the Internet.

Answer 1

This may not be the right solution for your case, but turn off the background image and add 1 transition setting acceptable to me (even on the phone).

 .md-sidenav-backdrop { opacity: 0 !important; } md-sidenav.md-closed-add, md-sidenav.md-closed-remove { -webkit-transition: all .4s cubic-bezier(0.25, .8, .25, 1) !important; transition: all .4s cubic-bezier(0.25, .8, .25, 1) !important; } 

Answer 2

I decided to just remove the animation as follows:

I looked at the AngularMaterial CSS file and deleted all the animation links. KA-BOOM!

 /** * fix md-sidenav lag by removing animation **/ .md-sidenav-backdrop { opacity: 0 !important; } md-sidenav.md-closed-add, md-sidenav.md-closed-remove, md-sidenav.md-closed-add.md-closed-add-active, md-sidenav.md-closed-remove.md-closed-remove-active, md-sidenav.md-locked-open-remove-active, md-sidenav.md-closed.md-locked-open-add-active { -webkit-transition: none !important; transition: none !important; } 

---- edit ----

Also being updated to the latest version of AngularMaterial, there seems to be a general improvement in version 1.0.0-rc4 compared to previous versions.