Material: md-sidenav(md-is-locked-open): animation issue

[gmanriqueUy]

Actual Behavior:

• What is the issue? * Playing with md-is-locked-open of sidenav has a weird animation behavior on opening. Closing it works well.
• What is the expected behavior? Opening shuold be as smooth as closing.

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue: http://codepen.io/gmanrique/pen/rLXxkE
• Details:
• Click on CLICK ME button to toggle md-is-locked-open value and watch how left sidenav hide correctly.
• Click same button again and watch how the sidenav appears without animation.

Angular Versions: *

• Angular Version: 1.5.8
• Angular Material Version: 1.1.0

Additional Information:

• Browser Type: * Chrome
• Browser Version: * 52.0.2743.116 (64-bit)
• OS: * Ubuntu 16.04 (64-bit)
• Stack Traces: N/A

[jayagl]

Seems to be because of !important on the width and min-width on the md-sidenav.md-closed.md-locked-open-add selector. Preventing the md-sidenav.md-closed.md-locked-open-add-active from taking effect fully:

  md-sidenav.md-closed.md-locked-open-add {
    width: 0 !important;
    min-width: 0 !important;
    transform: translate3d(0%, 0, 0); }

  md-sidenav.md-closed.md-locked-open-add-active {
    transition: width 0.3s cubic-bezier(0.55, 0, 0.55, 0.2), min-width 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
    width: 220px;
    min-width: 220px;
    transform: translate3d(0%, 0, 0); }

I've added this workaround for now:

md-sidenav.md-closed.md-locked-open-add-active {
    width: 220px !important;
    min-width: 220px !important;
}

[clshortfuse]

The issue is there's no transition property so there is no set duration for the animation. This is easily fixed by adding a default transition for the md-sidenav element:

.md-sidenav { transition: 0.2s all }

I'm trying to track down the exact CSS rule for this situation though and once I do, I'll make a PR for this.

[vapits]

@gmanriqueUy Did you manage to find solution on this? ?I have exactly the same problem and @jayagl solution is not working for me.

[gmanriqueUy]

@vapits Which version of Angular Material are you using?

Here is the same codepen of the issue's description with the @jayagl 's walkaround.

[vapits]

@gmanriqueUy sorry I just realized I'm in the wrong repo (blame google :P). I'm using material 2.