md-sidenav no animation on close

[erasethis]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Menu should be animated (slide out) when closing

What is the current behavior?

Menu just vanishes when closing

What are the steps to reproduce?

Set 'opened' on md-sidenav to true, menu slides in, set 'opened' to false, poof menu is hidden instantly

Providing a Plunker (or similar) is the best way to get the team to see your issue.
Plunker template: http://plnkr.co/edit/o077B6uEiiIgkC0S06dd

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

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

Angular 2 RC5, Material 2.0.0-alpha.7-2

Is there anything else we should know?

If I set these styles in my CSS, the menu behaves as expected:

md-sidenav:not(.md-sidenav-opened) {
-webkit-transition: -webkit-transform 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
transition: -webkit-transform 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
transition: transform 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
transition: transform 400ms cubic-bezier(0.25, 0.8, 0.25, 1), -webkit-transform 400ms cubic-bezier(0.25, 0.8, 0.25, 1), visibility 400ms cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.md-sidenav-backdrop {
transition: background-color 400ms cubic-bezier(0.25, 0.8, 0.25, 1), visibility 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
}

[devversion]

I just took a look at your issue and tried to reproduce it in a Plunker, but it seems to work as expected.

http://plnkr.co/edit/pvtTxpQbNuzauzyuCow7?p=preview

You could probably modify the Plunker to demonstrate your issue.

[gxclarke]

@erasethis It looks like your missing the outer md-sidenav-layout container on your plunker. Although I've also noticed that if you don't set the mode on 'md-sidenav' it defaults to 'side' (rather than 'over' as the documentation says). At least for me, 'side' doesn't animate the content area when the sidenav is opened or closed.

[fxck]

yeah it doesn't animate, but it does when you call close()(or click on backdrop).. also tbh when you set opened, it should mean that you are taking care of the state yourself and the component should be stateless, as it is now, when you call close()(or click on backdrop), your opened might still be true while sidenav is already closed...

[colinfang]

I think it isn't a bug. Better doc certainly helps here.

[aquinum6]

Mode: 'Side' does not animate content no matter if you call open() or close()
http://plnkr.co/edit/43Yr2f39hi71Ab6SlBfo?p=preview

Try to change 'push' to 'side' at plnkr that was supplied by @devversion and animation stops working.

Sidenav is animated fine, but 'md-sidenav-content' is not when mode is 'side'.

I have tested that on ng2 2.0.1 and ng2-md alpha.9-3

[eruano]

Webkit in older mobile devices (i.e. Android 4.4) require the vendor css properties which are not defined. That's why adding the styles in the application css as stated in the bug report fixed things. I am testing with an Android emulator to reproduce the issue.

-webkit-transition: -webkit-transform 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
transition: -webkit-transform 400ms cubic-bezier(0.25, 0.8, 0.25, 1);

I am trying to fix by add in the src/lib/sidenav-*-.sccs files but they are not written to the final css.

[mmalerba]

fixed by #2486

[angular-automatic-lock-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.}