Skip to content

Commit

Permalink
fix(sidenav): animate content resizing for side mode. (#2486)
Browse files Browse the repository at this point in the history
  • Loading branch information
devversion authored and kara committed Feb 4, 2017
1 parent 8a6d902 commit 4d33449
Show file tree
Hide file tree
Showing 2 changed files with 7 additions and 1 deletion.
6 changes: 5 additions & 1 deletion src/lib/sidenav/sidenav-transitions.scss
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,11 @@ md-sidenav {
}

.md-sidenav-content {
transition: transform $swift-ease-out-duration $swift-ease-out-timing-function;
transition: {
duration: $swift-ease-out-duration;
timing-function: $swift-ease-out-timing-function;
property: transform, margin-left, margin-right;
}
}

.md-sidenav-backdrop.md-sidenav-shown {
Expand Down
2 changes: 2 additions & 0 deletions src/lib/sidenav/sidenav.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,8 @@ The sidenav can render in one of three different ways based on the `mode` proper
| push | Sidenav _pushes_ the primary content out of its way, also covering it with a backdrop |
| side | Sidenav appears _side-by-side_ with the primary content |

Using the `side` mode on mobile devices can affect the performance and is also not recommended by the
[Material Design specification](https://material.io/guidelines/patterns/navigation-drawer.html#navigation-drawer-behavior).

### Positioning the sidenav
The `align` property determines whether the sidenav appears at the `"start"` or `"end"` of the
Expand Down

0 comments on commit 4d33449

Please sign in to comment.