-
Notifications
You must be signed in to change notification settings - Fork 6.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
option to disable the sidenavs transition animation #1126
Comments
I'm interested in this too. @jelbourn should it be reassigned? |
@mmalerba and I are going to be exploring some potentially wider sidenav changes in the coming months that may address this. |
You should be able to disable them now via Angular animations |
How would you disable them via Angular animations @jelbourn ? Any pointers would be appreciated! |
anyone have any info on this yet? |
@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 { |
@peterdobson Anyone knows how to only disable the side-nav transition? |
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. |
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
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?
The text was updated successfully, but these errors were encountered: