fix: header animation

Signed-off-by: Oleksii Orel <oorel@redhat.com>
eclipse-che · Jun 14, 2022 · 3f21a14 · 3f21a14
1 parent a3c3dad
commit 3f21a14
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 59 deletions.
diff --git a/packages/dashboard-frontend/src/Layout/Header/__tests__/__snapshots__/index.spec.tsx.snap b/packages/dashboard-frontend/src/Layout/Header/__tests__/__snapshots__/index.spec.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Page header should correctly render the component 1`] = `
 <header
-  className="pf-c-page__header"
+  className="pf-c-page__header show-header"
   style={
     Object {
       "zIndex": "inherit",

diff --git a/packages/dashboard-frontend/src/Layout/Header/index.module.css b/packages/dashboard-frontend/src/Layout/Header/index.module.css
diff --git a/packages/dashboard-frontend/src/Layout/Header/index.tsx b/packages/dashboard-frontend/src/Layout/Header/index.tsx
@@ -18,8 +18,6 @@ import { User } from 'che';
 import HeaderTools from './Tools';
 import { ThemeVariant } from '../themeVariant';
 
-import * as styles from './index.module.css';
-
 type Props = {
   history: History;
   isVisible: boolean;
@@ -56,8 +54,7 @@ export default class Header extends React.PureComponent<Props, State> {
 
   public render(): React.ReactElement {
     const logo = <Brand src={this.props.logoUrl} alt="Logo" />;
-
-    const className = this.state.isVisible ? styles.headerShow : styles.headerHide;
+    const className = this.state.isVisible ? 'show-header' : 'hide-header';
 
     return (
       <PageHeader

diff --git a/packages/dashboard-frontend/src/app.css b/packages/dashboard-frontend/src/app.css
@@ -111,3 +111,46 @@ div.main-page-loader .ide-page-loader-content img {
   padding-top: 0;
   border-top: 1px solid #e4e4e4;
 }
+
+.show-header {
+  animation-name: show;
+  animation-duration: 0.1s;
+  animation-timing-function: linear;
+}
+
+@keyframes show {
+  0% {
+    min-height: 0;
+    max-height: 0;
+    overflow: hidden;
+  }
+
+  100% {
+    min-height: 57px;
+    max-height: 57px;
+    overflow: visible;
+  }
+}
+
+.hide-header {
+  min-height: 0;
+  max-height: 0;
+  overflow: hidden;
+  animation-name: hide;
+  animation-duration: 0.1s;
+  animation-timing-function: linear;
+}
+
+@keyframes hide {
+  0% {
+    min-height: 57px;
+    max-height: 57px;
+    overflow: visible;
+  }
+
+  100% {
+    min-height: 0;
+    max-height: 0;
+    overflow: hidden;
+  }
+}