Material: Animation for SideNav not working on open

[aprotsyk]

Actual Behavior:

• What is the issue? Animation for SideNav not working on open
• What is the expected behavior? should be animated

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue: https://dl.dropboxusercontent.com/u/1714531/sidenav-close-animation-bug.mov
• Details: Animation for SideNav not working on open

Angular Versions: *

• Angular Version: 1.5.7
• Angular Material Version: 1.1.1

Additional Information:

• Browser Type: Chrome
• Browser Version: 52.0.2743
• OS: MacOS
• Stack Traces:

---

Shortcut to create a new CodePen Demo.
Note: * indicates required information. Without this information, your issue may be auto-closed.

Do not modify the titles or questions. Simply add your responses to the ends of the questions.
Add more lines if needed.

[ThomasBurleson]

@clshortfuse - did we not already fix (or have a PR) this Animation ?

[jrthib]

I'm having this issue as well.

[clshortfuse]

@ThomasBurleson The previous issue was related to ui-router. Here, 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.

[clshortfuse]

Duplicate of #9425 which better describes the bug.