I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

Even when disabled, styles of animation are preserved. This is not bad, however when animation state changes and and we enable animation, styles are not updated.

Expected behavior

Styles should update when animation becomes active again.

Minimal reproduction of the problem with instructions

https://stackblitz.com/edit/angular-ds3u1p

sidenav switches between mobile and mini variant depending on window width(xs - mobile, gt-xs -mini)

1. Go to "mini" variant(collapse state is active),
2. Go to mobile variant(collapse state is still active)
3. Open sidenav and close it(collapse is no longer active)
4. Go to "mini" variant(collapse is not active <- problem)

What is the motivation / use case for changing the behavior?

inconsistency

Environment

Angular version: 4.4.6


Browser:
- [x] Chrome (desktop) version 59
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform: Linux(Ubuntu 16.04) 

Others: