Sidenav slide animation not working with ui-router

[jws305]

I am having an issue getting the slideout effect with the sidenav component when using ui-router. If I disable the router, the nav slides out as expected but when the router is used, the backdrop fades in but the sidenav just appears.

Version using ui-router
http://plnkr.co/edit/CqtIyjFnn1nwH3FSi2Vj

Same example but without the router
http://plnkr.co/edit/0V60iLs5Auayb8Tt0HQu

Library versions:

• angular 1.4.1
• angular-material 0.10.0
• ui-router 0.2.15

[cleever]

Does anyone else have issues with sidenav and ui-router?

I am. I get the same behavior. I don't get any animation, and I am also not getting a backdrop. The "ng-enter" never gets removed from the backdrop (I assume because the animation is not firing), so the backdrop, although positioned correctly is transparent.

UPDATE: Seems like all animations may be broken somehow? FAB Toolbar animation is broken too, but I have not investigated further.

[leex]

I also have this problem.

"angular": "1.4.4",
"angular-ui-router": "0.2.15",
"angular-material": "0.10.1"

[endyjasmi]

Hello, the same problem.

Here's my bower.json

{
  "name": "web-client",
  "version": "0.0.0",
  "dependencies": {
    "angular": "~1.4.4",
    "angular-animate": "~1.4.4",
    "angular-aria": "~1.4.4",
    "angular-message-format": "~1.4.4",
    "angular-messages": "~1.4.4",
    "angular-resource": "~1.4.4",
    "angular-route": "~1.4.4",
    "angular-sanitize": "~1.4.4",
    "angular-material": "~0.10.1",
    "roboto-fontface": "~0.4.3",
    "angular-translate": "~2.7.2",
    "material-design-icons": "~2.0.0"
  }
}

[qvazzler]

+1

"dependencies": {
    "angular": "~1.4.4",
    "jquery": "2.1.4",
    "jquery-validation": "1.13.1",
    "angular-material": "master",
    "moment": "2.10.3",
    "respond": "1.4.2",
    "angular-material-icons": "~0.5.0",
    "angular-resource": "~1.4.1",
    "ui-router": "~0.2.15"
  }

[endyjasmi]

Found some time today, so I look into this problem. Not sure if this is a problem or not but whenever the sidenav is shown of remove, the library will add .md-closed-remove and .md-closed-add respectively. Both this class have transition duration set to 0s. So, I work around this by adding the following css to my stylesheet.

.md-sidenav-left.md-closed-add,
.md-sidenav-left.md-closed-remove {
    transition: 0.2s ease-in all;
}

Where .md-sidenav-left is the class identifier for my sidenav node and I like ease-in as my transition timing function.

Not sure if this helps. Cheers!

[ThomasBurleson]

Perhaps this issue is related to #4246?

[lscordilis]

@endyjasmi Thanks, man. That's a suitable work around until this is patched. The latest Angular build breaks the animation, as pointed out in #4246

[endyjasmi]

Glad that it helps.

Cheers