Components: option to disable the sidenavs transition animation

[jmurphzyo]

Bug, feature request, or proposal:

feature

What is the expected behavior?

an option to disable the close/open transition

What is the current behavior?

if you alter the width/display/position it fires the sidenav transition.

What are the steps to reproduce?

Providing a Plunker (or similar) is the _best_ way to get the team to see your issue.
do something that changes the sidenavs position/display/width

What is the use-case or motivation for changing an existing behavior?

it makes the look and feel of integrating other 3rd party libraries poor. (ie any 3rd party app that also intergrates a fullscreen mode.. ie ckeditor)

Which versions of Angular, Material, OS, browsers are affected?

latest

Is there anything else we should know?

[willshowell]

I'm interested in this too. @jelbourn should it be reassigned?

[jelbourn]

@mmalerba and I are going to be exploring some potentially wider sidenav changes in the coming months that may address this.

[jelbourn]

You should be able to disable them now via Angular animations

[peterdobson]

How would you disable them via Angular animations @jelbourn ? Any pointers would be appreciated!

[eliteproxy7]

anyone have any info on this yet?

[peterdobson]

@eliteproxy7 try replacing BrowserAnimationsModule with NoopAnimationsModule in app.module.browser.ts, and the following in your app.component.css:

.mat-drawer-transition .mat-drawer-content {
transition-duration: 0s !important;
}

[tmtron]

@peterdobson
When we use NoopAnimationsModule, all animations are gone and we don't need the css anyway.
But the problem is that now all animations in the app are gone, not only for the side-nav/drawer!

Anyone knows how to only disable the side-nav transition?

[philip-firstorder]

This animation style is briefly visible during the transition on the mat-sidenav:

<mat-sidenav style="animation: gen_css_kf_24 400ms linear 0ms 1 normal forwards running;"></mat-sidenav>

It calls the BrowserAnimationsModule generated keyframes defined here:

@keyframes gen_css_kf_24 {
  0% {
    box-Shadow: none;
    visibility: hidden;
    animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
    transform: matrix(1, 0, 0, 1, -72, 0);
  }
  100% {
    box-Shadow: none;
    visibility: visible;
    transform: none;
  }
}

I guess you need to toggle the properties yourself to make it work.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}