From 80012a5e656381c2eceddb8d0100aad7a0a6b64d Mon Sep 17 00:00:00 2001 From: Paul Gschwendtner Date: Sun, 1 Jan 2017 15:21:26 +0100 Subject: [PATCH 1/2] fix(sidenav): animate content resizing for side mode. * Animates the `margin-left` and `margin-right` for the `sidenav-content` because otherwise when using `mode="side"` the sidenav content will just jump and not animate as same as the `push` mode. --- src/lib/sidenav/sidenav-transitions.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/lib/sidenav/sidenav-transitions.scss b/src/lib/sidenav/sidenav-transitions.scss index ad445bff3b38..eff57506ba90 100644 --- a/src/lib/sidenav/sidenav-transitions.scss +++ b/src/lib/sidenav/sidenav-transitions.scss @@ -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 { From 1582a1e45c8a3090965f5de7440e55e4da933ad8 Mon Sep 17 00:00:00 2001 From: Paul Gschwendtner Date: Thu, 5 Jan 2017 14:17:39 +0100 Subject: [PATCH 2/2] Add info about performance to Overview document --- src/lib/sidenav/sidenav.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/lib/sidenav/sidenav.md b/src/lib/sidenav/sidenav.md index 9abebe591b25..069c5b46b32a 100644 --- a/src/lib/sidenav/sidenav.md +++ b/src/lib/sidenav/sidenav.md @@ -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