How to disable animation for md-sidenav in angularjs

Question

I am using md-sidenav from Material Design in angularjs.

Question Is it possible to disable the md-sidenav animation when it opens and closes? It seems that its opening and closing are animated by default.

<md-sidenav md-component-id="left" class="md-sidenav-left"> Left Nav! </md-sidenav> 

Answer 1

Try adding the md-no-ink attribute to sidevav

 <md-sidenav md-no-ink md-component-id="left" class="md-sidenav-left"> Left Nav! </md-sidenav> 

Or remove all animations overriding CSS:

 .md-ripple-container, .md-ripple-placed { transition: none; } 

link: https://groups.google.com/d/topic/ngmaterial/HJ01ZHEbOQA/discussion

Answer 2

I create a disable-animations.css with the following:

 * { -webkit-transition: none !important; transition: none !important; } 

I include this file at the end of everything.

If you need to disable certain controls, use:

 disable-animation, disable-animation *, .disable-animation, .disable-animation * { -webkit-transition: none !important; transition: none !important; } 

Answer 3

This CSS worked for me. 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; }