From 4217fd38a7d926c16462aa593b26d7e7a0cb8902 Mon Sep 17 00:00:00 2001
From: Joen Asmussen <asmussen@gmail.com>
Date: Fri, 1 Feb 2019 12:24:39 +0100
Subject: [PATCH] Try: Add animation to sidebar.

WIP
---
 packages/edit-post/src/components/layout/style.scss  |  6 ------
 packages/edit-post/src/components/sidebar/style.scss | 11 +++++++++++
 packages/edit-post/src/style.scss                    |  6 ++++++
 3 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss
index 963862b7105d73..14973f1c59a265 100644
--- a/packages/edit-post/src/components/layout/style.scss
+++ b/packages/edit-post/src/components/layout/style.scss
@@ -181,12 +181,6 @@
 	}
 }
 
-@keyframes edit-post-layout__slide-in-animation {
-	100% {
-		transform: translateX(0%);
-	}
-}
-
 .edit-post-layout .editor-post-publish-panel__header-publish-button {
 	// Match the size of the Publish... button.
 	.components-button.is-large {
diff --git a/packages/edit-post/src/components/sidebar/style.scss b/packages/edit-post/src/components/sidebar/style.scss
index cd8256823d4e75..a91b4c093d880f 100644
--- a/packages/edit-post/src/components/sidebar/style.scss
+++ b/packages/edit-post/src/components/sidebar/style.scss
@@ -11,6 +11,17 @@
 	height: 100vh;
 	overflow: hidden;
 
+
+	// Animate in the sidebar
+	transform: translateX(+100%);
+
+	.is-sidebar-opened & {
+		@include break-medium() {
+			animation: edit-post-layout__slide-in-animation 0.1s cubic-bezier(0, 0, 0.2, 1);
+			animation-fill-mode: forwards;
+		}
+	}
+
 	@include break-small() {
 		top: $admin-bar-height-big + $header-height;
 		z-index: z-index(".edit-post-sidebar {greater than small}");
diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss
index 90fac100e15eed..c3145a59e021d6 100644
--- a/packages/edit-post/src/style.scss
+++ b/packages/edit-post/src/style.scss
@@ -50,6 +50,12 @@
 	}
 }
 
+@keyframes edit-post-layout__slide-in-animation {
+	100% {
+		transform: translateX(0%);
+	}
+}
+
 // In order to use mix-blend-mode, this element needs to have an explicitly set background-color
 // We scope it to .wp-toolbar to be wp-admin only, to prevent bleed into other implementations
 html.wp-toolbar {