Try: Add animation to sidebar.

WIP
WordPress · Feb 1, 2019 · 4217fd3 · 4217fd3
1 parent 532ed5f
commit 4217fd3
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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 {