CODEWITHSUNDEEP
angularjsanimationmaterial-design
Sunil
Sunil

Reputation: 21406

How to disable animation for md-sidenav in angularjs

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

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

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

Upvotes: 7

Views: 7214

Answers (3)

Eduardo Cuomo
Eduardo Cuomo

Reputation: 19006

I generate a disable-animations.css with next:

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

I include this file at the end of all.

If you need disable specific controls, use:

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

Upvotes: 3

David
David

Reputation: 3194

This CSS worked for me. I looked through the AngularMaterial CSS file and removed all references to animations. 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;
}

Upvotes: 1

Diego Lins de Freitas
Diego Lins de Freitas

Reputation: 625

Try add the attribute md-no-ink to the sidevav

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

Or remove all animations overriding the CSS:

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

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

Upvotes: 5

Related Questions